最大高度最大寬度100％，但拉伸圖像，同時調整瀏覽器

Question

我有以下代碼：

#containerDiv{ 
    width:40%; 
    height:60%; 
    position:absolute; 
    bottom:0px; 
    right:0px; 
} 

#myImage{ 
    position:relative; 
    max-width:100%; 
    max-height:100%; 
} 

<div id="containerDiv"> 
    <img id="myImage" src="img.jpg" /> 
</div> 

當我調整它通常效果很好的瀏覽器，但有時會忽略最大高度並拉伸圖像，使其適合父div框的整個寬度。我如何解決它？

Answer 1

您發佈的代碼似乎沒有任何問題。圖像永遠不會比它的父母大。即使圖像源大於父圖像，它也會縮小以適應內部。你有任何其他的CSS規則div或img？

Answer 2

基於我對你想要達到的目標的理解，一種非常簡單的方法可以使用絕對定位來保持圖像100％的父div高度不同。

body{ 
 
    width:100%; 
 
    height:100vh; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
#containerDiv{ 
 
    width:40%; 
 
    height:60%; 
 
    position:absolute; 
 
    top:0; 
 
    right:0px; 
 
} 
 

 
#myImage{ 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
}

<div id="containerDiv"> 
 
    <img id="myImage" src="http://lorempixel.com/1000/700/animals" /> 
 
</div>

Answer 3

唯一的情景我能想到的是，你有地方在你的CSS，通過X值適用width或height您<img />

這裏是一個DEMO規則與拉伸：

https://jsfiddle.net/2pcrkL2v/2/