AllDani.com AllDani.com - 28 days ago 5
CSS Question

Image Max Width

I want to apply

max-width
to an image, but the image ignores the given
max-width
.

Screenshot:

Image overlapping

Snippet:



.screenshot {
max-width: 460px;
margin: 27px;
}

.description {
max-width: 705px;
}

<div class="screenshot">
<img src="http://placehold.it/850x850" alt="App">
</div>
<div class="description">text you see in screenshot.
</div>




Answer

The max-width would have to be on the image.

Image elements don't care what dimensions their parent tells them--they will simply stretch the parent container to fit anyways.

Edit: for example, you can create a new rule whose selector is .screenshot img and then apply the max-width there.