可能使父母的榮譽寬度的孩子形象？

Question

我想讓一個父元素榮譽一個子圖像的寬度。

它適用於加載，但如果您調整視口的高度以強制更改圖像高度，則父元素'會記住'圖像的初始大小並保持該寬度。

如果你用寬度而不是高度來模擬上面的話，那就沒有問題了。

這裏是行爲的視頻：http://jmp.sh/8VEOZS8

下面是一個codepen：http://codepen.io/iamkeir/pen/YWgvdw

html, body { height: 100%; } 
 

 
.wrapper { 
 
    display: inline-block; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/1280x960" /> 
 
</div>

我想知道：

1）爲什麼這發生了

2）如果有辦法修復它

謝謝！

Answer 1

您可以通過將max-width和max-height屬性設置爲圖像來修復該問題，以避免溢出包裝或窗口。然後，您可以將display: inline-block;設置爲包裝，而不是現在用於替換浮動元素的包裝。我設置圖像是display: block;只是這樣它會顯示爲一個塊元素，並消除周圍等怪異空間

html, body { height: 100%; } 
 

 
.wrapper { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    display: block; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/1280x960" /> 
 
</div>