Html 最大高度最大宽度100%，但在调整浏览器大小时拉伸图像

我有以下代码：

#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>

#containerDiv{
宽度：40%；
身高：60%；
位置：绝对位置；
底部：0px；
右：0px；
}
#我的形象{
位置：相对位置；
最大宽度：100%；
最大高度：100%；
}

---

当我调整浏览器的大小时，它通常工作得很好，但有时它会忽略最大高度并拉伸图像，使其适合父div框的整个宽度。如何修复它？

您发布的代码似乎没有任何问题。图像永远不会比其父图像大。即使图像源比父图像源大，它也会缩小以适应内部。对于

div

或

img

，您还有其他CSS规则吗？

根据我对您尝试实现的理解，一种非常简单的方法可以在不同的屏幕宽度下保持图像100%的父div高度，您可以使用绝对定位

正文{
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
}
#集装箱四{
宽度：40%；
身高：60%；
位置：绝对位置；
排名：0；
右：0px；
}
#我的形象{
位置：绝对位置；
排名：0；
底部：0；
}

---

我能想到的唯一情况是，CSS中的某个地方有一条规则，将

宽度

或

高度

通过X值应用于

下面是一个拉伸的演示：

---

你们能给我们一个拉伸的屏幕截图吗？我并没有另一个适用宽度或高度的规则，你们知道它可能是什么吗？你们检查了继承吗？你们可以避免继承设置

width

&

height

到

自动
到你们的
\myImage
规则我以前试过，但它似乎不起作用。如果我在internet explorer中打开页面，没有问题。如果我在firefox中打开页面，它只会水平延伸，如果我在chrome中打开页面，它只会垂直延伸。所以我不知道代码有什么问题…你能粘贴一把小提琴吗？还是截图？我的演示在你的浏览器上运行吗？