Geek Answers Handbook

Download images based on screen size

I have the following HTML code that displays an image:

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

What I'm trying to do is display a different image depending on the screen size. Therefore, first hide the image using CSS:

 #wm01 { display: none; }

And then in my BODY I will 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 does not appear on the screen of any size. How can i fix this?

+7
source share
7 answers

No one suggested using the <picture> element.

<picture> has a nice feature that allows you to specify different images for different window sizes.

For instance:

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

For you, it will be:

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

Which says use theImages/wm01_app.jpg when the device width is at least 568px . Otherwise, use the default <img> source.

+8
source

This is an interesting, ongoing issue. There is more than one right way, but here are a few options:

+6
source

First I suggest a CSS media query, and then JavaScript if you need to support a browser that does not support a media query. This example uses 850px as the maximum width before changing the image.

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" />
+5
source

Others have suggested alternative methods to solve the multiple image problem, but with the proposed solution, the problem is that you are trying to give an src image before the DOM is ready. Make sure everything is loaded using window.onload and it will work. Change your code to:

 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"; } };
+4
source

Use a media query to zoom out and show a background image.

Note. This method requires you to know the size / aspect ratio of the replacement image.

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 */ } }
+1
source

I am doing the same thing on my website using this code, and is great for me.

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'/>") } });

in this case I use three different image sizes.

+1
source

Why not use srcset and sizes from <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">

For more information go though Responsive_images

Supported by all major browsers.

0
source

More articles:


All Articles