使用 CSS 按比例缩放图像答案

【问题标题】：Scaling images with CSS proportionally使用 CSS 按比例缩放图像
【发布时间】：2011-04-10 23:51:36
【问题描述】：

我正在处理流畅的布局，但在缩放图像时遇到了问题。我最近一直在使用绝对宽度和高度，但这在很多情况下都会导致问题。

我的源图像是 1642 像素宽 760 像素高。

有没有办法做一些涉及百分比的事情，就像您可以在 Photoshop 中按比例缩放图像一样？假设我希望图像的高度与其容器的高度相同，但宽度在这个意义上是成比例的。

【问题讨论】：

标签： css

【解决方案1】：

您需要做的只是指定图像高度，宽度将按比例缩放。

img{
    height:100px;
}

在http://jsfiddle.net/jncnE/查看工作示例

【讨论】：

【解决方案2】：

在任何变体中都对我不起作用，即使使用 !important 也是如此。仅指定高度限制会挤压图像，而宽度不会缩放，反之亦然。

我在这里的另一个线程上找到了解决方案。您必须根据需要将一个维度设置为自动。

.containerName {
width: auto;
height: 150px !important;
}

我使用重要来覆盖另一个我无法更改的设置。

【讨论】：