CSS - 当宽度强迫它变形时，保持高度为100％的图像比例？

Question

我的图像高度设置为100％。只要有足够的宽度，这就可以像我期望的那样正确显示图像。但是，当屏幕的宽度减小时，最终图像会失去它的比例，因为宽度被压扁而高度仍然保持100％。我想让图像始终在容器内伸展到最大尺寸，而不会失去它的比例。换句话说，宽度是限制因素，图像应使用100％宽度和保持比例，但如果高度是限制因素，图像应使用100％高度，同时保持其比例，它应该能够在这些之间切换。有没有办法在CSS中完全做到这一点？谢谢！

Answer 1

这应该保持正确的比例（假设您不需要由于某种原因将高度设置为100％）。

img{
    width: 100%;
    height: auto;
}

- 编辑 -

如果你想保持父元素的一致高度，你可以：

• 使用overflow: hidden;隐藏溢出的图像。虽然这个 意味着你会丢失一些较大尺寸的图像。 See example.

• 使用max-width和max-height停止图像增长 某一点。这意味着您可能会留下一些 设计中的白色空间。 See example.