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

What's the best way to resize an image proportionally without creating whitespace?

本文关键字：调整 按比例 情况下 图像 方法 最佳 空白 创建 什么      更新时间：2023-09-26

我可以按比例调整图像大小，如下所示：

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/以演示效果。

相关文章：