All geek questions in one place

Implementation of sensitive images, which are dynamic width, static height, and DPR consciousness.

For each post on the website there will be a headline. This image will have a width of 100vw and a height of 300px . I would like to provide several versions of this image using the srcset attribute of the srcset tag or the fully functional picture element (not sure if at this point, therefore, this question).

Doing this would be fairly easy with 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 consider various proportions of pixels of the device. First, suppose I have 2x and 3x versions of all the images listed in srcset above.

Say I have a 2x phone with a 320px (e.g. iPhone 5). I would like the browser to load xs_2x.jpg . Similarly, let's say I have a 1x desktop with a widescreen monitor. I would like the browser to load lg.jpg .

But now let me say that I have a larger phone, one with a 3x , 414px -wide viewport (i.e. iPhone 6 Plus). In this case, I would like my browser to download sm_3x.jpg . But my browser will most likely download sm_2x.jpg , 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 will cause an image that is not 300px high on the device to violate the website requirement.

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

+6
source share
3 answers
 background-size: 100% cover;

That should work.

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

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

0
source

You should keep in mind that JPEG image resolution (DPI) does not make sense for screens. The main thing here is the total horizontal / vertical number of pixels.

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

So, for 1x monitor and 3x iPhone you need the same image (1920 x 300 pixels), and its code in srcset will 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 are using a device with a screen width of 320 pixels and are a 1x (non-grid) display, you should use an image with a width of 320 pixels.

Only the total number of pixels is important here.

0
source

I have not received exact requirements from you.

I want to give you my code to try 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>
-1
source

Source: https://habr.com/ru/post/981735/

More articles:


All Articles