响应式图片处理——更改图片SRC路径

响应式图片处理

    在响应式网站中,通过下面的设置可以让图片在不形变的情况下自适应。但是手机浏览器和PC浏览器加载的图片大小是一致的，导致手机端体验不佳，有没有办法使用不同的图片呢？答案是：有的，浏览器和服务器都可以实现。

方案一

HTML5有一个关于响应式图片的草案，可以使用<picture>标签实现。可惜只是个草案！下面是一个例子，简单了解

 

 方案二

CSS中background-image属性可以解决背景图片的响应式问题，可是只能满足背景图片的要求，在图片轮换方面作用不大，LOGO可以用哈。Firebug数据可以作证只会下载相应的背景图片。

 方案三

通过JS检测浏览器，服务器响应不同版本的网站。维护成本有点高，暂时不考虑。

 方案四

使用display：none属性隐藏掉不需要展示的图像版本，通过CSS控制不同浏览器尺寸大小的显隐。问题是，这样本质上下载了所有的图片版本，Firebug数据可以作证，万万不可取。

 方案五

使用JS调用不同尺寸的图像，可是怎么控制调用哪一张呢，CSS @media 应该可以？ 恭喜你，想错了，CSS不能嵌套JS的。JS嵌套CSS @media呢？貌似也不管用。灵光一闪，JS可以完成CSS @media的浏览器尺寸检测功能，OK，问题解决。Firebug数据也可以作证。

 

 *****************************************************************************************************************************************************

有图有数据有真相

说明：当宽度小于1000px时，载入1000-.jpg，当宽度大于1000时，载入1000+.jpg

 场景一：宽度小于1000px，Firebug数据显示只载入1000-.jpg

场景二：宽度大于1000px，Firebug数据显示只载入1000+.jpg

 

 

 

场景三：相互切换