缩放图像以适合DIV

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

对不起，忘了提，我需要它在IE8工作

2012-03-22 Plexus81

可以使用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和Windows 7级的用户应该是IE9），使用<img>标签来代替，因为这会导致浏览器将图像缩放到您使用CSS高度/宽度或标签的HTML属性指定的尺寸。

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

来源

2012-03-22 12:50:28 deed02392

这不适用于IE8，所以我想它会排除它作为大多数事情的可行选项。 – DoctorMick 2012-03-22 12:56:13

如果我在后台设置了这样的东西有没有办法在css中设置url？ – Plexus81 2012-03-22 13:20:11

你不能不幸的是，你需要使用javascript来设置标签的src属性。 – deed02392 2012-03-22 13:22:37

这里是小提琴的更新版本，它利用了CSS3属性background-size的：http://jsfiddle.net/EyW99/2/

你需要添加到您的风格是什么基本上是background-size: contain;使浏览器缩放图像，使如果您想自己控制尺寸，则仍然适合您的元素的图像的最大可能尺寸，或者background-size:X% X%;或background-size:Xpx Xpx;。

注意

由于背景的大小是一个CSS3属性，它限制了浏览器的支持。

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

跨浏览器soultion

这种解决方案也许不是“好”作为新的CSS属性，但对于跨浏览器支持，你可以改变你的div到img，这将使浏览器调整图像大小。

来源

2012-03-22 12:52:48

.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％。

来源

2012-03-22 12:54:45 DoctorMick

如果您不需要纯粹的CSS解决方案，那么您可以使用JavaScript来实现适用于所有主流浏览器的解决方案。 jQuery的插件会根据您的需要进行调整，并会在div大小发生变化时动态调整大小。

来源

2012-03-22 12:59:30 Kaivosukeltaja

缩放图像以适合DIV

回答

相关问题