[Resolved] How to make image inside div adjust to container size

[Are Martin]

Hi Tom, I´m trying to make an image inside a div container adjust to the varying size of the div container on different displays.

This works fine when the image is centered on top. However I want the image to be aligned to the right. This only looks good if I do not resize the browser window, and it´s messed up on mobile and smaller displays

I tried giving the image a class and setting it to max-height: 100%; I thought this would make it adjust with the container. but this does´t change anything. The image stays the same size regardless of screen size.

Here is a screenshot of the div with the image:

And here is a screenshot with of what happens when i give the div a smaller height:

as you can see, the image stays the same size. It doesn´t adjust with the div container. What am I doing wrong?

Here is the code I used:

<div style="background-color: #fff; padding: 0px; height: 400px;">

<img class="spor alignright" src="http://www.fysionett.no/wp-content/uploads/2015/09/Fysioterapi-2.jpg" alt="" width="600" height="400" />

<div style="background-color: #fff; padding: 40px;">
<h2>Spørsmål til fysioterapeuten</h2>
Bruk feltet nedenfor for å sende inn ditt spørsmål til fysioterapeuten. Svar på spørsmål vil bli postet innen 3 virkedager i forumkategorien <a href="http://www.fysionett.no/forum-fysionett/kategori/spor-fysioterapeuten/" target="_blank">spørsmål og svar</a>.

Tjenesten er gratis og det er ikke nødvendig å være registrert bruker for å sende inn spørsmål.

</div>
</div>
</div>

[Tom]

Hi there,

Try adding this class for your opening div: clearfix

Then remove the height CSS.

So it would be:

<div style="background-color: #fff; padding: 0px;" class="clearfix">

[Are Martin]

Nice! 🙂 That fixed it, thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts