Question

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

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

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

Answer 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%;
    }

Answer 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;
}

但非常感谢你引导我到了正确的地方！

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

2 个答案: