javascript - 在 li 内缩放背景图像

Question

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

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

对 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对于 IE）并应用background-size-property 如果它适合视口（CSS 方式将是media-queries）。对于 IE，您必须隐藏背景图像并使用其专有filter的sizingMethod='scale'声明。

或者，您可以通过 JS 注入标签（如果浏览器不支持 background-size 属性（要检测到这一点，您可以使用modernizr）并对其应用 a z-index:-9999;，因此它会留在后台。

使用 JS，您还可以建立某种有条件的延迟加载技术，根据用户的视口大小（移动用户不需要 1300²px）加载不同大小的图像 - 放弃对 IE8 的支持，您还可以使用提到的 CSS 媒体查询上面加载不同的背景图像（或使用类似response.js来模拟 IE 的媒体查询）

Answer 3

从背景中删除它并将图像定位为绝对

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

}

也应该在 IE7 中工作。