在 li 内缩放背景图像

Scaling a background image inside a li

本文关键字：背景 图像 缩放 li      更新时间：2023-09-26

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

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

对CSS或js开放，如果IE7 +兼容并在其他浏览器上运行会很好。

有什么想法吗？

将其

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

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

}

也应该在IE7中工作。

试试这个：

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

除了最佳实践(图像应该只与显示的一样大(之外，您还可以使用 CSS 属性 background-size ，遗憾的是这尚未完全支持，因此您将不得不放弃对糟糕的 IE 的支持。

使用 JS，您可以检查window.innerWidth(IE document.documentElement.clientWidth(并应用background-size -属性，如果它适合视口(CSS方式将是媒体查询(。对于IE，您必须隐藏背景图像并将其专有filter与sizingMethod='scale'声明一起使用。

或者，您可以通过 JS 注入一个标记(如果浏览器不支持 background-size 属性(要检测这一点，您可以使用 modernizr((并对其应用z-index:-9999;，以便它保留在后台。

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

相关文章：