CSS - 如何使圖像容器固定寬度和高度自動伸展

Question

我已經去一些HTML代碼：

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

和CSS代碼：

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

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

我想要做的是使用div的寬度來製作img顯示器並且拉伸它的高度。我也希望div伸展自己以適應img。那可能嗎？

Answer 1

你要找的是min-height和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使圖像取寬度它的容器<div>。它會拉伸/縮小高度以保持比例。不要在<div>中設置高度，它將根據圖像高度進行調整。

img { 
    width:inherit; 
} 

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

JSFiddle example

Answer 3

不，你不能讓IMG拉伸以適應div和同時實現反轉。你將有一個無限大小的循環。但是，您可以從其他答案中獲取一些註釋並實施一些最小和最大尺寸，但這不是問題。

您需要確定您的圖片是否會縮放以適合其父項，或者您是否希望div展開以適合其子項img。

使用此塊告訴我你希望圖像大小是可變的，所以父div是圖像縮放的寬度。 height: auto將保持您的圖像寬高比。如果你想拉伸高度，它需要像這個小提琴100%。

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

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