FAQ: Sizing Elements - Scaling Images and Videos

If you set the width of the <img> element to 100%, it would take up the full width of its parent container at all times.

However, when setting its max-width property to 100%, it will only take up the whole width of its parent container up to its maximum width. This means that if the image was 400 x 200px, it would only take up the whole width of its parent container up to 400px. So if its parent container was 300px wide, the <img> would scale down, but if it was 500px wide, the <img> wouldn’t take up the whole width of its parent container - it would only take up 400px of its parent container’s width

Finally, if you set the <img> element’s min-width property to 100%, it would take up the whole width of its parent container only if it has a width that is at least the width of the image. So, again, if the image was 400 x 200px, it would only take up the whole width of its parent container if the parent container was at least 400px wide

Here’s where I read this:

2 Likes