Thay đổi kích thước hình ảnh theo tỷ lệ sử dụng CSS?

Tôi đã thử một vài ngày để định cấu hình thư viện hình thu nhỏ của mình để tất cả các hình ảnh xuất hiện cùng chiều cao và chiều rộng. Tuy nhiên, khi tôi thay đổi mã Css thành,Thay đổi kích thước hình ảnh theo tỷ lệ sử dụng CSS?

max-height: 150px; 
max-width: 200px; 
width: 120px; 
height: 120px;

Tôi nhận được hình ảnh có cùng kích thước nhưng tỷ lệ khung hình bị kéo dài làm hỏng hình ảnh. sao không có cách nào thay đổi kích cỡ vùng chứa hình ảnh chứ không phải hình ảnh thay thế? cho phép tôi giữ tỷ lệ khung hình. nhưng thay đổi kích thước hình ảnh. (Tôi không phiền nếu tôi cắt một số hình ảnh.)

Cảm ơn bạn trước!

Nguồn

2013-03-28 Beaniie

116

đây là vấn đề đã biết với thay đổi kích thước CSS, trừ khi tất cả hình ảnh có cùng tỷ lệ, bạn không có cách nào để thực hiện việc này thông qua CSS.

Cách tiếp cận tốt nhất là có vùng chứa và thay đổi kích thước một trong các thứ nguyên (luôn giống nhau) của hình ảnh. Trong ví dụ của tôi, tôi thay đổi kích thước chiều rộng.

Nếu vùng chứa có kích thước được chỉ định (trong ví dụ của tôi về chiều rộng), khi nói hình ảnh có chiều rộng là 100%, nó sẽ làm cho nó có chiều rộng đầy đủ của vùng chứa. Các auto ở độ cao sẽ làm cho hình ảnh có chiều cao tỷ lệ thuận với chiều rộng mới.

Ex:

HTML:

<div class="container"> 
<img src="something.png" /> 
</div> 

<div class="container"> 
<img src="something2.png" /> 
</div>

CSS:

.container { 
    width: 200px; 
    height: 120px; 
} 

/* resize images */ 
.container img { 
    width: 100%; 
    height: auto; 
}

Nguồn

2013-03-28 15:27:23 jackJoe

Bạn cần sửa một mặt (ví dụ: chiều cao) và đặt một mặt khác thành auto.

Ví dụ

height: 120px; 
width: auto;

Điều đó sẽ mở rộng hình ảnh dựa trên chỉ một bên. Nếu bạn thấy việc cắt xén hình ảnh có thể chấp nhận được, bạn có thể chỉ cần đặt

overflow: hidden;

thành phần tử chính sẽ cắt bất kỳ thứ gì có thể vượt quá kích thước của nó.

Nguồn

2013-03-28 15:23:32 hexblot

Tôi đã thử điều này, nhưng nó vẫn mang lại cho tôi hình ảnh có kích thước và hình dạng khác nhau, tôi muốn bộ sưu tập đồng nhất như vậy, [] [] [] [] không giống [] [] [] [] [] – Beaniie

sử dụng kết hợp cả hai ở trên: đặt chiều cao thành một số (với chiều rộng tự động để giữ tỷ lệ) và giới hạn độ rộng của bố mẹ thành chiều rộng cụ thể bằng 'overflow: hidden' để cắt số dư – hexblot

cảm ơn! – Beaniie

Đặt nó như là một nền tảng về sở hữu của bạn ví dụ

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;"> 
&nbsp; 
</div>

này sẽ tập trung hình ảnh của bạn bên trong một div 120x120 chặt tắt bất kỳ dư thừa của ảnh

Nguồn

2013-03-28 15:27:39 DickieBoy

Bạn có thể sử dụng object-fit tài sản css3, một cái gì đó giống như

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset='utf-8'> 
 
    <style> 
 
    .holder { 
 
     display: inline; 
 
    } 
 
    .holder img { 
 
     max-height: 200px; 
 
     max-width: 200px; 
 
     object-fit: cover; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='twiddla.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
</body> 
 

 
</html>

Nó tuy nhiên, không phải là câu trả lời chính xác của bạn, vì nó không kéo dài thùng chứa, nhưng nó hoạt động như các bộ sưu tập và bạn có thể giữ kiểu dáng img chính nó.

Một nhược điểm khác của giải pháp này vẫn là sự hỗ trợ kém của thuộc tính css3.Chi tiết có tại đây: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. Giải pháp jQuery cũng có thể được tìm thấy ở đó.

Nguồn

2013-07-08 05:23:26

Cảm ơn, giải pháp tốt đẹp. :) – Bibhu

Đây là câu trả lời kỳ lạ với một thuộc tính chỉ được hỗ trợ trong opera atm ?! http://caniuse.com/object-fit –

Tôi thấy điểm của bạn, @Simon, cảm ơn bạn. Tôi đã đề cập đến tôi không có ý tưởng nếu tài sản sẽ được hỗ trợ ở khắp mọi nơi, nhưng _even nếu nó sẽ không_, chúng tôi có thể sử dụng nó như là một điểm khởi đầu để google cho _alternatives_ mà thay thế nó. Một lý do khác để đăng là câu trả lời sẽ ở lại một thời gian trong khi các trình duyệt ngày càng trở nên tốt hơn mỗi ngày, vì vậy tôi cũng đã trả lời nhắm mục tiêu _this gần tương lai_. –

Để làm cho hình ảnh có thể điều chỉnh/flexible bạn có thể sử dụng này:

/* fit images to container */ 
.container img { 
    max-width: 100%; 
    height: auto; 
}

Nguồn

2014-04-30 17:08:09 Stanislav

nếu bạn biết tỷ lệ SPECT bạn có thể sử dụng padding-bottom với tỷ lệ phần trăm để thiết lập Hight tùy thuộc vào với của diff.

<div> 
    <div style="padding-bottom: 33%;"> 
     i have 33% height of my parents width 
    </div> 
</div>

Nguồn

2016-01-13 20:59:57 reco

Thay đổi kích thước hình ảnh theo tỷ lệ sử dụng CSS?

Trả lời

Các vấn đề liên quan