How to output different images depend on user screen?


Tags: javascript,html,css

Problem :

For example if I have two sets of images for my website, one set is low resolution, another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that? Using javascript? or any other method ? possible to define in css or html?



Solution :

You can use CSS media queries for that. More about media queries here.

Example:

/* This block applies to all "screen" devices
*/
@media screen {
    .some-content {
        background-image: url(largeimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 1279px (e.g., < 1280)
*/
@media screen and (max-width: 1279px) {
    /* Use `mediumimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(mediumimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 639px (e.g., < 640)
*/
@media screen and (max-width: 639px) {
    /* Use `smallimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(smallimage.jpg);
    }
}

Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).


    CSS Howto..

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How to add another two full width sections below (CSS)

    How do I increase the width of a navbar dropdown?

    How to create a border with spaces in it [duplicate]

    How to animate an unknown number of items in sequence using css animations?

    How do I add box shadows when the parent div has a background image?

    How to apply css class to an html element using jquery in ASP .NET MVC?

    How to add a style to