Question

我可以按比例调整图片大小：

HTML：

<div style="height: 500px;">
    <img src="http://placekitten.com/500/500">
</div>

CSS：

img {
    max-width: 100%; 
    max-height: 100%;
}

Fiddle

当您水平缩小窗口大小时，图像会变小但会在下面创建空白区域。

如何防止这种情况发生，最好只使用CSS，或者尽可能少使用JS？

如果您不确定，请告诉您，它已在this site上完成，但使用了jquery插件

无论如何，我期待你的回答：）

Answer 1

好像你正在寻找background-size: cover。这将拉伸图像以完全覆盖给定元素。

div {
  background-size: cover;
  background-image: url(http://placekitten.com/500/500);
  background-repeat: no-repeat;
  background-position: center top;
}

有关效果的演示，请参阅http://jsfiddle.net/pNyGC/。

在不创建空白的情况下按比例调整图像大小的最佳方法是什么？

1 个答案: