I'm having a problem using the CSS min() function together with max-width.

Imagine I have the following html:

<main> <article> <section> <img> </section> </article> </main>

article adjusts according to the size of section. The image loaded in img has a width of 800px.

Now, I have the CSS:

img { max-width: 400px; }

This makes the image 400px wide, and so are its ancestors. Now, if I put max-width: min(400px, 100%), the image is 400px wide, but its ancestors are 800px.

Lucas's user avatar

1

max-width does not change the intrinsic width of an image.

Your image is naturally 800px, so even though it is visually scaled down to 400px, its ancestors still size themselves as if the image were 800px wide.

max-width: min(400px, 100%) only limits how large the image may become, but it does not change the width used for shrink-to-fit calculations.

img { width: min(400px, 100%); }

Kodela Akshay's user avatar

New contributor

Kodela Akshay is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.