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

CSS：显示/缩放图像而不会弄乱比例？

1 个答案: