Setting vw in the sizes attribute

[steveplusplus]

Hi all,

Noob here. I think I have got to grips with the srcset and sizes attributes now. I understand how to set the vw size after the media query, only if the body attribute has a width of 100%. This makes it very easy to calculate. However I am not sure how to calculate the size in vw when the body has a width less than 100% and a margin set to auto. I’d set the vw attribute up like this when the body is set to 100% and the image takes up 60% of the viewport width;

sizes=”(min-width: 800px) 60vw, 100vw”

Thanks for your help in advance. Loving the CSS-Tricks site.

[Paulie_D]

However I am not sure how to calculate the size in vw when the body has a width less than 100%.

Why would the body have a width less than 100%?

In any case, vw relates to the browser window width and is not related to any body width….except that they should be the same..in an ideal world.

Not sure what you are asking..TBH.

[steveplusplus]

Hi Paulie,

If I create a centred flexible layout in css, then the vw would calculate to 100% of the body width which I defined as 80%? Is this the wrong way to approach this kind of layout?

body {
margin: auto;
width: 80%;
}

Thanks, Steve

[Paulie_D]

Why restrict the body width?…I know people do but why not just put a wrapper div in there that does the same thing.

A div is semantically null…so that’s not an issue.

then the vw would calculate to 100% of the body width which I defined as 80%?

Does it… I didn’t think so….’vw` is not taken from body width (AFAIK) but viewport width.

MDN

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.

[steveplusplus]

You are right about vw. I had set max-width to 100% in CSS which caused me trouble when experimenting. Thanks for your advice.

[Author]

Posts