最大高度最大宽度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/