Image In Div With Max Width Not Working

Question

I'm applying max-width to a div containing an image, but the image ignores the applied value.

Screenshot:

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 1

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.

Edit If you try this rule with ids it won't work, it only works with classes.

Answer 2

Here are some options you can try

Try using div.screenshot{ max-width:460px } to strengthen your target selection

Try using an id tag instead of a div, as id tags get more priority

Try adding !important in your div i.e .screenshot{ max-width:460px !important }

Upvotes: 0