如何用CSS拉伸图像？

.mod.left { 
background-image: url("http://www.myimage.jpg"); 
display: block; 
height: 160px; 
overflow: hidden; 
width: 175px; 
}

对应这个HTML：

<div class="mod left"></div>

它导致这个烂摊子：

enter image description here

是否有办法伸展的图像适合一个div？即使以图像质量为代价？谢谢！

2011-09-12 JZ.

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

2011-09-12 22:27:32 GolezTrol

它基本上对不是IE的每个浏览器都有完整的支持。它只适用于IE9。 – joshnh

如果它在IE9中工作，它在IE中工作，对不对？ ;-)它在FF和Chrome的每个版本中都不可能工作。但感谢您的反馈，我不知道它已被许多浏览器支持。 – GolezTrol

供将来参考：我用这个网站很多来检查浏览器兼容性：http://caniuse.com/#search=background-size – joshnh

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

2011-09-12 22:30:36 kevindh89

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

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

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

2011-09-13 00:22:40

回答