CODEWITHSUNDEEP
htmlcss
Amay
Amay

Reputation: 1521

Img srcset and sizes attributes

I'm trying to make a simple website with img tag, that will use the new srcset attribute. The main idea is to change the image (src) depending on the screen resolution.

Working example

The problem is with the sizes. As you can see, now it is 100vw, but it doesn't work correctly. For me, it resize img to about 80% of the screen, not 100%. The best thing is, that when I write in CSS for img tag width: 100vw, it will resize to 100% of the screen.

Can someone help me with that? Maybe I'm doing something wrong?

Upvotes: 3

Views: 1301

Answers (1)

Yoav Weiss
Yoav Weiss

Reputation: 2270

The image is 1152 pixels wide, but you tell the browser it is 1500 pixels wide (1500w). The browser then determines the image's density based on what you told it, and corrects the image's intrinsic dimensions accordingly, but since it used the wrong value for the density calculations, the image occupies 76.8% of the viewport width rather than 100% of it.

To change that, you can provide the browser with a larger resource, or tell it that the resource is 1152w.

Upvotes: 5

Related Questions