你如何用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>

导致这个混乱：

有没有办法拉伸图像以适合div？即使牺牲图像质量？谢谢！

Answer 1

您可以使用CSS3属性background-size。但目前尚未得到广泛支持。

Answer 2

您可以使用background-size CSS属性。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

<div>
    <img src="yourImage.jpg" alt="" />
</div>

div{width:300px; height:300px; overflow:hidden;} //example
img{width:100%;}

这样，图像将水平调整大小以覆盖整个div。 不设置高度，将使其按比例自动调整大小。 我建议你把overflow:hidden;放在你的div上。如果图像比率不完全相同，则将隐藏超出。