html - max-height max-width 100% 但在调整浏览器大小时拉伸(stretch)图像

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>

当我调整浏览器大小时，它通常运行良好，但有时它会忽略最大高度并拉伸(stretch)图像，使其适合父 div 框的整个宽度。我该如何解决？

Answer 1

您发布的代码似乎没有任何问题。图像永远不会大于它的父级。即使图像源比父级大，它也会按比例缩小以适合内部。 div 或 img 还有其他 CSS 规则吗？