Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support How to make image inside div adjust to container size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #145006
    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>
    #145082
    Tom
    Lead Developer
    Lead Developer

    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">

    #145131
    Are Martin

    Nice! 🙂 That fixed it, thank you!

    #145222
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.