CSS:在不弄乱比例的情况下显示/缩放图像？

Question

我有一张图片，例如 120 x 90 像素。现在我想显示该图像的较小版本，例如 80 x 50 像素。我知道我可以使用宽度和高度，它们适用于具有相同尺寸的图像。

现在我的问题是我有不同的图像，它们具有不同的原始大小，仅使用静态宽度和高度会使一些图像看起来很奇怪(因为比例困惑)。

我该如何处理这种情况？是否可以使用纯 CSS，还是我需要一些 JS？

谢谢!

Answer 1

我们称之为动态 div，当 de div 变小或变大时，图像会调整大小。

一个例子

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

<div style="max-width:500px;">
    <img src="..." />
</div>

FIDDLE注意:如果您调整浏览器窗口的大小，您会看到图像也被调整了大小。

如果你制作一个小的 div，图像也很小。等