html - CSS 你如何拉伸以适应和保持纵横比？

Question

我有以下CSS：

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

这对应于这个 HTML：

<div class="mod left"></div>

它导致了这个混乱：

在此处输入图像描述

如果我使用 css3 background-size: 175px 160px; 纵横比真的搞砸了，导致这样的混乱：

在此处输入图像描述

有没有办法拉伸图像以适应 div？但是以保持纵横比的方式？我想要自动裁剪。

score 36 · Accepted Answer

这应该有效（在支持的浏览器中background-size）：

background-size: 175px auto;

你也可以试试：

background-size: cover;

或者：

background-size: contain;

score 5 · Accepted Answer

5

必须是背景图吗？

img{
width:300px;
height:auto;
}


<img src="your-photo.png">

于 2011-09-12T22:53:04.173 回答

score 3 · Accepted Answer

您可以使用background-size具有以下值的属性contain：

background-size: contain;

在上面的示例中，主体在背景中具有拉伸图像。还有两个任意大小的 div，以及另一个适合并保持纵横比的图像。

score 2 · Accepted Answer

您可以使用 CSS Object-fit属性。

{
 height: 160px;
 width: 175px;
 object-fit: cover;
}

Object-fit 可以具有以下值。

包含、覆盖、填充、无、按比例缩小。请参阅上面的链接了解更多信息。

score 1 · Accepted Answer

如果使用 img 而不是背景，我发现了这种方法：

        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        object-fit: contain;

5 回答 5