将图像缩放以适应div

Question

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

http://jsfiddle.net/EyW99/

抱歉，忘记提到我需要它在IE8中运行

- Plexus81

Answer 1

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

.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" />

- deed02392

---

这在IE8上不起作用，所以我猜它将被排除为大多数事情的可行选项。 - DoctorMick

如果我在后端设置了类似于 <img class="image" /> 这样的东西，有没有一种方法可以在 CSS 中设置 URL？ - Plexus81

很遗憾，你需要使用JavaScript来设置标签的src属性。 - deed02392

background-size: contain; 绝对不起作用 - 它会使 DIV 变大以适应图像。 - Coxy

background-size: contain 属性对 div 的尺寸没有影响，只影响其中的背景图片。 - deed02392

Answer 2

这里是更新版本的代码片段，它使用了CSS3属性background-size：http://jsfiddle.net/EyW99/2/ 您需要添加到样式中的基本上是background-size: contain;，使浏览器将图像缩放到最大可能适合元素内部的图像大小，或者background-size:X% X%;或background-size:Xpx Xpx;如果您想自己控制大小。

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

支持IE9+、Firefox 4+、Opera、Chrome和Safari 5+。

跨浏览器解决方案

这个解决方案可能不如新的CSS属性“好看”，但为了跨浏览器支持，您可以将div更改为img，这将允许浏览器调整图像的大小。

- Christofer Eliasson

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%。

- DoctorMick

Answer 4

如果您不需要一个纯CSS解决方案，您可以使用JavaScript来解决所有主要浏览器的问题。jQuery的bgStretcher插件将会达到您想要的效果，并且会根据div大小动态调整大小。

- Kaivosukeltaja