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

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

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

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

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

<强> Fiddle

<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

为什么不使用srcset的{{1}}和sizes属性

<img>

要获取更多参考，请访问Responsive_images

all major browsers

支持

根据屏幕大小加载图像

7 个答案: