css - 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 图像也很小。等等