CODEWITHSUNDEEP
htmlresponsive-designpixel-ratio
Marcus McLean
Marcus McLean

Reputation: 1326

Implementing responsive images that are dynamic-width, static-height, and DPR-conscious

For each post on a website, there will be a header image. This image will have a width of 100vw and a height of 300px. I would like to deliver multiple versions of this image via either the srcset attribute of an img tag or a full-fledged picture element (not sure which at this point, hence this question).

Doing so would be rather easy using the srcset attribute:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

The problem arises when I want to account for different device pixel ratios. First, assume I have 2x and 3x versions of all of the images listed in the srcset above.

Let's say I have a 2x phone with a 320px-wide viewport (e.g. an iPhone 5). I'd want the browser to load xs_2x.jpg. Likewise, let's say I have a 1x desktop with a widescreen monitor. I'd want the browser to load lg.jpg.

But now let's say I have a larger phone, one with a 3x, 414px-wide viewport (i.e. an iPhone 6 Plus). In this case, I'd want my browser to load sm_3x.jpg. But, my browser would likely load sm_2x.jpg instead because the width of sm_2x.jpg (1536 pixels) is closer to the width of the phone (1242 pixels) than the width of sm_3x.jpg (2304 pixels). This would result in an image that is not 300px tall on the device, breaking a requirement of the website.

How can I implement dynamic-width, static-height, DPR-conscious responsive images?

Upvotes: 6

Views: 1738

Answers (3)

Ivan Gerasimenko
Ivan Gerasimenko

Reputation: 2428

You should take into account that JPEG image resolution (DPI) is meaningless for screens. The main thing here is total horizontal/vertical count of pixels.

So 1x, 2x and 3x versions of an image would be (according to device width!): Device - image size table

So 1x monitor and 3x iPhone would require the same image (1920 x 300px) and it's code in srcset would be img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

Note: if you're on a device with a screen width of 320px and is a 1x (non-retina) display, you should use image with the width of 320px.

Only the total count of pixels is important here.

Upvotes: 0

Akilsree1
Akilsree1

Reputation: 462

I did not get exact requirement of you.

I want to give you my code to try for your requirement. Try this code:

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title>Responsive Images</title>
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
      </script>
    </head>
    <body>

      <div class= "container-fluid">
        <div class="row">

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
   class="img-responsive">
          <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> -->
        </div>
      </div>
        </body>
        </html>

Upvotes: -1

user3155561
user3155561

Reputation: 

background-size: 100% cover;

This should work.

EDIT: The simple reason why this will work is because you can do it in CSS alone. background-size will cover the available space see article: http://davidwalsh.name/background-size

create a css class: .img-resp { background-size: 100% cover; } then apply it to your element.

Upvotes: 0

Related Questions