CSS - làm thế nào để làm cho chiều rộng thùng chứa hình ảnh cố định và chiều cao tự động kéo dài

Question

Tôi đã đi một số mã html như thế này:

<div class="item"> 
    <img src="..."> 
</div> 

Và css mã như thế này:

img { 
    max-width: 100%; 
    height: auto; 
} 

.item { 
    width: 120px; 
    height: 120px; 
    height: auto; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

Những gì tôi muốn để làm là làm cho màn hình hiển thị img sử dụng chiều rộng của div và kéo dài chiều cao của nó. Tôi cũng muốn div căng ra để phù hợp với img. Điều đó có thể không?

Answer 1

những gì bạn đang tìm kiếm là min-height và max-height.

img { 
    max-width: 100%; 
    height: auto; 
} 

.item { 
    width: 120px; 
    min-height: 120px; 
    max-height: auto; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

Answer 2

width:inherit để làm cho hình ảnh có chiều rộng của vùng chứa <div>. Nó sẽ kéo dài/thu nhỏ chiều cao của nó để duy trì tỷ lệ. Không đặt chiều cao trong các <div>, nó sẽ kích thước để phù hợp với chiều cao hình ảnh.

img { 
    width:inherit; 
} 

.item { 
    border:1px solid pink; 
    width: 120px; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

JSFiddle example

Answer 3

Không, bạn không thể làm cho căng img để phù hợp với div và đồng thời đạt được nghịch đảo. Bạn sẽ có một vòng lặp vô hạn. Tuy nhiên, bạn có thể lấy một số ghi chú từ các câu trả lời khác và thực hiện một số kích thước tối thiểu và tối đa nhưng đó không phải là câu hỏi.

Bạn cần quyết định xem hình ảnh của bạn có mở rộng để vừa với bố mẹ hay nếu bạn muốn div mở rộng để phù hợp với hình ảnh con của nó.

Sử dụng khối này cho tôi biết bạn muốn kích thước hình ảnh biến đổi sao cho div cha là độ rộng hình ảnh được chia tỷ lệ. height: auto sẽ giữ tỷ lệ cỡ ảnh của bạn không đổi. nếu bạn muốn kéo dài chiều cao nó cần phải là 100% như thế này fiddle.

img { 
    width: 100%; 
    height: auto; 
} 

http://jsfiddle.net/D8uUd/1/