- This topic is empty.
July 31, 2014 at 3:58 am #177079
Can some one please explain the function of Size attribute whilst defining various image sizes?
I got my images working fine – responsive & adaptive by playing around with the numbers in the Size attribute but I don’t understand what stands for what.
sizes="(min-width: 320px) 1920px, 100vw" alt="yollo Image!">
What does “100vw” mean?
vw = viewport?
Please help..July 31, 2014 at 5:49 am #177092
I am unable to access http://ericportis.com/posts/2014/srcset-sizes/ from my workplace.
As you can see, currently I have 5 different images at different dimensions,
I set my size attribute,
sizes=”(min-width: 320px) 1920px, 100vw”
based on the assumption that,
min-width for the img = 320px;
& max-width for the img @ 100vw = 1920px.
Is my assumption correct?July 31, 2014 at 6:46 am #177104
Here’s what i got,
It appears to be perfectly adaptive.
Note that I am also using Flexbox besides Picturefill – v2.0.0-beta – 2014-05-02
I would like to know if my size attributes are effectively making the “responsiveness ” functional?August 1, 2014 at 5:27 am #177192
So I read the articles and played around but still…dont get it :/
I have added image dimensions to the images so that we know which image is being called.
I am lost as to why the image does not “shrink” / “expand” with the viewport.
Between viewport size,
-> 960px to 1920px, the 1920px img can be called and scaled down OR
-> 768px to 960px, the 960px img can be called and scaled down to fitAugust 5, 2014 at 11:08 pm #177862
Sorry Atelierbram, I have not been able to get back to you.
I saw your codepen and I was wondering if we could just stick with img srcset, as it seems to be supported by most of the current browsers,
Also, would i be right to assume that in most cases, we can make the image adaptive by defining size = “100%”?August 6, 2014 at 2:25 am #177891
Looks good to me..
I was wondering,
size=”100%” roughly translates to “100% of viewport”
basically, “100vw” is same as “100%’ with regard to the size attribute?
I am going to start using this, wonder how it shows up in different devices..August 6, 2014 at 3:28 am #177895August 6, 2014 at 3:56 am #177900
Most of the browsers that support “srcset” support “vw” as well, so it should work as intended.
- The forum ‘CSS’ is closed to new topics and replies.