使用 CSS 将图像裁剪为百分比

【问题标题】：Cropping image as a percentage with CSS使用 CSS 将图像裁剪为百分比
【发布时间】：2011-10-13 11:06:45
【问题描述】：

我想调整图像的大小，使其占据页面宽度的 100% 和高度的 40%，但不会扭曲图像的自然比例。

我遇到了this tutorial，但我似乎无法让它与百分比值一起使用，而不仅仅是像素或 em 值。

任何想法如何做到这一点？非常感谢。

【问题讨论】：

别害羞，给我们看看你的代码。

标签： css crop

【解决方案1】：

您可以为此使用 css3 background-size 属性：

div{
 background:url(image.jpg) no-repeat;
 -moz-background-size:100% 40%;
 -webkit-background-size:100% 40%;
 background-size:100% 40%;
}

&如果你不想扭曲图像，那么这样写：

div{
     background:url(image.jpg) repeat-x;
     -moz-background-size:auto 40%;
     -webkit-background-size:auto 40%;
     background-size:auto 40%;
    }

【讨论】：

【解决方案2】：

这似乎效果更好：

div{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40%;
 background:url(images/background.jpg) no-repeat;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
 background-size:100% auto;
}

但是非常感谢你把我带到了正确的地方！

【讨论】：