根据屏幕尺寸加载图像 [英] Load images based on screen size

问题描述

我有以下显示图片的HTML程式码：

I have the following HTML code which displays an image:

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

我想要做的是根据屏幕大小显示不同的图像。所以首先我用CSS隐藏图像：

What I am trying to do is display a different image depending on the screen size. So first I hide the image with CSS:

#wm01 {
    display: none;
}

然后在我的BODY中添加以下代码：

And then in my BODY, I add the following code:

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";
}

图片未显示在任何大小的萤幕上。如何解决？

The image is not showing in any size screen. How can I fix it?

推荐答案

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

This is an interesting, ongoing, problem. There is no one right way but here are some options:

• http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/


• http://css-tricks.com/which -responsive-images-solution-should-you-use /

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

这篇关于根据屏幕尺寸加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！