Getting an image to fit its container.

[matth921104]

Hi there everyone. 

I'm making a tribute page for my favorite band as a project to get some practice. Wasn't sure where to post this because it's CSS and HTML.

I've attached an image so you can see what the problem is. I can't seem to get the images to fit the container. I've tried a bunch of things and I can't get it right. 

Thanks for your help. 

Here is my CSS code:

/*Band member images*/

 

.row {

        display: flex;

        max-width: 300px;

}

 

.column {

        flex: 25%;

        padding: 1px;

}

 

.figure {

        border: 1px solid black;

        max-width: 300px;

        max-height: 300px;

}

 

.img {

        max-width: 300px;

        max-height: 300px;

        object-fit: cover;

}

HTML code:

    <figure class="row">

        <figure class="figure">

        <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/brandon_flowers.jpg"

        alt="Brandon Flowers"><figcaption>Brandon Flowers</figcaption>

        </figure>

 

        <figure class="figure">

        <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/mark_stoermer.jpg"

        alt="Mark Stoermer"><figcaption>Mark Stoermer</figcaption>

        </figure>

 

        <figure class="figure">

        <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/dave_keuning.jpg"

        alt="Dave Keuning"/><figcaption>Dave Keuning</figcaption>

        </figure>

 

        <figure class="figure">

        <img class="img" id="ronnievannucci" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/ronnie_vannucci.jpg"

        alt="Ronnie Vannucci"><figcatpion>Ronnie Vannucci</figcatpion>

        </figure>

    </figure>

[dsonesuk]

You not providing sizes for it to grow to, just dont grow above 300px, so ok! I'll stay at this size then job done!

Remove max-height and max-width and try it with width and height at 100%.

 

Also 'figcatpion' that's a new one on me?

Edited May 7, 2022 by dsonesuk

[matth921104]

Thanks for your help @dsonesuk 

Great, I will give it a go. Hahaha, didn't see that. Will make that change too.