我可以按比例调整图像大小,如下所示:
HTML:
<div style="height: 500px;">
<img src="http://placekitten.com/500/500">
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
}
Fiddle
当水平缩小窗口大小时,图像会变小,但会在下面创建空白。
我如何才能防止这种情况发生,最好只使用CSS,或者如果不使用尽可能少的JS?
如果你不确定,可以给你一个想法,它已经在这个网站上完成了,但使用了jquery插件
无论如何,我期待着你的回答:)
您似乎在寻找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/以演示效果。