CODEWITHSUNDEEP
imageresponsive-designretina
Mark Roberts
Mark Roberts

Reputation: 1

Full screen responsive images mark up

I'm trying to figure out the best and simplest way to create a full screen image that supports retina screens and and also covers screen sizes from large desktop right down to phones. The image always fills the viewport at all widths. Seems to me that the simplest approach is to create the image in a range of sizes from double the pixels width of a desktop screen (for desktop retina) right down to one the width of a phone screen and then just list them all under srcset and let the browswer figure it out, and presumably because the img is always full width I don't need to bother about the sizes attribute?

Is this the best approach?

Upvotes: 0

Views: 89

Answers (1)

alexander farkas
alexander farkas

Reputation: 14154

In short yes, but you should still use the sizes attribute. It is now required, but you can simply set it to: sizes="100vw".

Upvotes: 0

Related Questions