根据屏幕大小加载图像

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只要设备宽度至少是theImages/wm01_app.jpg ，就使用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

其他人提出了解决多个图像问题的替代方法，但是对于你提出的解决方案，问题是你在DOM准备好之前试图给src一个图像。 确保所有内容都加载了window.onload，它会工作。 将您的代码更改为：

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;

// The onload:
window.onload = function(){
    if (x<568) {
        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 5

使用媒体查询缩小图像并显示背景图像。

注意：此方法要求您知道替换图像的大小/比例。

小提琴

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

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}

Answer 6

我使用这个代码在我的网站上做同样的事情，对我来说非常适合。

HTML

<figure class="picture"></figure>

JAVASCRIPT / JQUERY

$(document).ready(function(){
    var w = window.innerWidth;
    if(w <= 650){
      $(".picture").html("<img src='images-min.jpg'/>")
    }
    else if(w>650 && w<=1300){
      $(".picyure").html("<img src='images-med.jpg'/>")
    }
    else{
      $(".picture").html("<img src='images-big.jpg'/>")
    }
});

在这种情况下，我使用三种不同尺寸的图像。

Answer 7

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

<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

它受到所有主流浏览器的支持