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>