根据屏幕大小加载图像

Question

我有以下显示图像的HTML代码:

<div>
     <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />
</div>

我要做的是根据屏幕大小显示不同的图像.首先我用CSS隐藏图像:

#wm01 {
    display: none;
}

然后在我的身体中,我添加以下代码:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
if (x<568) {
    //alert(x);
    document.getElementById("wm01").src="theImages/wm01_app.jpg";
    document.getElementById("wm01").style.display = "block";
}
else {
    document.getElementById("wm01").src="theImages/wm01.jpg";
    document.getElementById("wm01").style.display = "block";
}

图像未显示在任何尺寸的屏幕中.我该如何解决？

Answer 1

还没有人建议使用<picture>元素.

<picture> 有一个很好的功能,你可以为不同的窗口大小指定不同的图像.

例如:

<picture>
    <source srcset="some-bigger.png" media="(min-width: 500px)">
    <img src="some.png" alt="Some picture">
</picture>

对你来说它将是:

<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

也就是说,theImages/wm01_app.jpg无论何时设备宽度至少使用568px.否则使用默认<img>源.

Answer 2

这是一个有趣的,持续存在的问题.没有一种正确的方法,但这里有一些选择:

• http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/
• http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 3

如果你需要支持不支持媒体查询的浏览器,我会先建议CSS媒体查询然后建议使用JavaScript.此示例在更改图像之前使用850px作为最大宽度.

CSS:

/* media query device layout transformation for 850px width trigger */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS/JQuery的:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML:

<div id="wm01" alt="PP" title="PP" u="image" /><!--comment for legacy browser --></div>
<img id="wm01" alt="PP" title="PP" u="image" />

Answer 4

为什么不使用srcset和sizes属性<img>

<img srcset="tiger-320w.jpg 320w,
             tiger-480w.jpg 480w,
             tiger-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="tiger-800w.jpg" alt="Bengal tiger">

如需更多参考，请访问Responsive_images

所有主流浏览器都支持