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

Posted 2023-02-25

【中文标题】使用 CSS 将图像裁剪为百分比

【英文标题】：Cropping image as a percentage with CSS

【发布时间】：2011-10-13 11:06:45

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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;

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