Html 宽度恒定时，根据窗口高度使图像响应

代码笔上的示例：

我在学习响应性设计时没有使用像

bootstrap

这样的库，我在弹出窗口中显示大图像时遇到了一个问题，这个弹出窗口应该是高度和宽度响应的。我有以下片段：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.外部{
左边距：自动；
右边距：自动；
最大宽度：1200px；
边框：1px实心#333；
位置：相对位置；
最高：50%；
}
.内部{
宽度：100%；
高度：自动；
位置：绝对位置；
}
.内部img{
最大宽度：100%；
高度：自动！重要；
位置：绝对位置；
}

检查此代码笔：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.外部{
最大宽度：1200px；
边框：1px实心#333；
位置：相对位置；
最高：50%；
}
.内部{
宽度：100%；
身高：100%；
位置：固定；
溢出：隐藏；
}
.内部img{
宽度：100%；
身高：100%；
位置：绝对位置；
}

只需使用高度为100vh的

.outer{
左边距：自动；
右边距：自动；
最大宽度：1200px；
边框：1px实心#333；
位置：相对位置；
最高：50%；
}
.内部{
宽度：100%；
高度：自动；
位置：绝对位置；
}
.内部img{
高度：100vh；
最大宽度：100%；
位置：绝对位置；
}

图像不再具有宽度响应性，高度为100vh

，当我减小宽度时，图像会拉伸。如何在css中修复此问题？我希望图像同时具有高度和宽度响应高度保持不变如果我减小浏览器宽度并且图像在小提琴中被拉伸，那么响应高度和宽度的含义是什么请检查此链接，减小浏览器窗口的高度或宽度，或者同时减小两个窗口，您将看到图像在保持纵横比的同时进行了完美的调整。减小窗口宽度时，图像没有保持纵横比。图像应同时响应高度和宽度