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

Question

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

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

有什么想法可以实现这个目标吗？非常感谢。

- bravokiloecho

---

不要害羞，展示你的代码。 - daveyfaherty

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

- sandeep

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

非常感谢您指引我到正确的地方!

- bravokiloecho