6 replies

image size based on container vs viewport in the html

front-end

<img src="an-image.jpg" alt="..." sizes="30%" srcset="an-image.jpg 1100w">

<img src="an-image.jpg" alt="..." sizes="30%" srcset="an-image.jpg 1100w">

versus

<img src="an-image.jpg" alt="..." sizes="30vw" srcset="an-image.jpg 1100w">

<img src="an-image.jpg" alt="..." sizes="30vw" srcset="an-image.jpg 1100w">

I'm trying to do responsive images sized relative to the container, not the viewport. I can make the images 100% of the container. I can make image a particular vw/em/px size. I can't seem to make the image a percentage of the container. Am I missing something??

Solutions I'm guessing would work but don't want to because shouldn't

size

size

do the job, also the responsive benefits would be much reduced if you're styling them after the instantiation?
- inline style size the image
- bespoke a container for each image
- make a class for the proportionate size I want and fill the stylesheet with that nonsense.

I'd ideally like to do this with <picture>, although that's only because I'm mixing .jpg and .webp for my responsive images, if <img> can handle mixed types then I don't need <picture>.

KP-C

Kevin Powell - Community•6d ago•

6 replies

arghc

image size based on container vs viewport in the html

front-end

<img src="an-image.jpg" alt="..." sizes="30%" srcset="an-image.jpg 1100w">

<img src="an-image.jpg" alt="..." sizes="30%" srcset="an-image.jpg 1100w">

versus

<img src="an-image.jpg" alt="..." sizes="30vw" srcset="an-image.jpg 1100w">

<img src="an-image.jpg" alt="..." sizes="30vw" srcset="an-image.jpg 1100w">

size

size

image size based on container vs viewport in the html

Similar Threads

image size based on container vs viewport in the html

Similar Threads

Similar Threads

Similar Threads