Question

我想缩放图片以适应主要的div类

抱歉，忘记提及我需要它在IE8中工作

Answer 1

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

.image {
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat;
    width: 100%;
    height: 100%;
    background-size: contain;
}

如果您需要支持旧浏览器（即Windows XP及以下版本的IE，因为Vista和7用户应该使用IE9），请使用<img>标记，因为这会导致浏览器将图像缩放到您在CSS高度/宽度或标记的HTML属性中指定的尺寸。

<img class="image" src="http://astridterese.files.wordpress.com/2010/07/google.jpg" />

Answer 2

以下是使用CSS3属性background-size的小提琴的更新版本：http://jsfiddle.net/EyW99/2/

您需要添加到样式中的内容基本上是background-size: contain;，以使浏览器将图片缩放到仍然适合您元素的图片的最大可能尺寸，或background-size:X% X%;或{{1如果你想自己控制尺寸。

注意

由于background-size是CSS3属性，因此浏览器支持有限。

IE9 +，Firefox 4 +，Opera，Chrome和Safari 5 +。

跨浏览器灵魂

这个解决方案可能不像＆＃34;很好＆＃34;作为新的CSS属性，但对于跨浏览器支持，您可以将background-size:Xpx Xpx;更改为div，这样浏览器就可以调整图片大小。

Answer 3

.main{
    height: 113px;
    max-width: 400px;
}

.image {
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat scroll 0 0 transparent;
    background-size: 100% 100%;
}

这适用于Chrome但不适用于IE8，所以可能没用。

就个人而言，我将内部div更改为图像标记，其宽度和高度设置为100％。

Answer 4

如果您不需要纯CSS解决方案，则可以将JavaScript用于适用于所有主流浏览器的解决方案。 bgStretcher的jQuery插件会执行您想要的操作，并会在div的大小发生变化时动态调整大小。

缩放图像以适合div

4 个答案: