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

Question

我可以像这样按比例调整图像的大小：

HTML：

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

CSS：

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

小提琴

当您水平减小窗口大小时，图像会变小，但会在下方创建空白。

我怎样才能防止这种情况发生，最好只使用 CSS，或者如果不使用尽可能少的 JS？

如果您不确定，给您一个想法，它已在此站点上完成，但使用 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/。