Question

我在网站上有一个基本的滑块。

我有很高分辨率的图像，所以我可以将图像缩放几百像素。我有什么想法可以将背景图像缩放到某一点？图像目前为每张幻灯片1000px，想要将bg宽度缩放到1300px ...如果浏览器那么广......

打开CSS或js，很高兴ie7 +兼容并在其他浏览器上运行。

任何想法？

Answer 1

试试这个：

-o-background-size: width height;         
-webkit-background-size: width height;   
-khtml-background-size: width height;    
-moz-background-size: width height;     
background-size: width height;

演示：http://jsfiddle.net/tfazD/

Answer 2

除了最佳实践（图片应该只显示它们一样大），你可以使用CSS属性background-size，遗憾的是这还不完全支持，所以你不得不放弃对IE的支持

使用JS，您可以检查window.innerWidth（document.documentElement.clientWidth for IE）并应用background-size - 属性（如果它适合视口）（CSS方式为media-queries）。对于IE，您必须隐藏背景图像并使用其专有的filter和sizingMethod='scale'声明。

或者你可以通过JS注入一个标签（如果浏览器不支持background-size属性（为了检测这个，你可以使用modernizr））并对它应用z-index:-9999;，所以它留在后台。

使用JS你还可以建立某种条件延迟加载技术来加载不同大小的图像，具体取决于用户的视口大小（移动用户不需要1300²px） - 删除对IE8的支持以及之前你也可以使用CSS上面提到的媒体查询加载不同的背景图像（或使用respond.js之类的东西来模拟IE的媒体查询）

Answer 3

将其从背景中移除并将图像定位为绝对

selectior-name-if-any img{
 width:100%;
 height:auto;

}

也应该在IE7中工作。

缩放里面的背景图像

3 个答案: