使用 CSS 按比例更改图像大小

Question

几天来我一直在尝试配置我的缩略图库，以便所有图像都显示相同的高度和宽度。但是，当我将 CSS 代码更改为

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

我得到的图像大小都相同，但纵横比被拉伸，破坏了图像。有没有办法调整图像容器而不是图像的大小？允许我保持纵横比，但调整图像大小。 （我不介意我剪掉一些图像。）

原文由 Lewis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是 CSS 大小调整的一个已知问题。除非所有图像都具有相同的比例，否则您无法通过 CSS 做到这一点。

最好的方法是拥有一个容器，并调整图像的其中一个维度（始终相同）的大小。在我的示例中，我调整了宽度。

如果容器具有指定的尺寸（在我的示例中为宽度），当告诉图像的宽度为 100% 时，它将使其成为容器的整个宽度。 auto 在高度处将使图像的高度与新宽度成正比。

例子：

HTML:

 <div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS：

 .container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

原文由 jackJoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要固定一侧（例如，高度）并将另一侧设置为 auto 。

例如，

  height: 120px;
 width: auto;

那将仅基于一侧缩放图像。如果您发现裁剪图像可以接受，您可以设置

overflow: hidden;

到父元素，这将裁剪掉任何超出其大小的内容。

原文由 Nick Andriopoulos 发布，翻译遵循 CC BY-SA 4.0 许可协议