Getting an Image to auto-resize inside a CSS Grid - html

Question

Very beginner to HTML/CSS and I need some help with fitting in image inside a CSS Grid.
I have created a simple CSS grid and when I'm trying to fit an image inside one of the grid, I was able to get width to fit properly, but the height is something that will not change.
I've tried obejct-fit, max-height with ratios...etc.
Would you please help and guide me on how to get this done?
This is my codepen currently working on: https://codepen.io/jyjang703/pen/poodOgw
#main {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 250px 300px 300px auto;
grid-gap: 10px;
background-color: white;
grid-template-areas: "header header header header" "section1 section2 section3 section4" "footer footer footer footer";
}
#title {
grid-area: header;
border: 1px solid red;
background-color: red;
text-align: center;
}
#section1 {
grid-area: section1;
border: 1px solid red;
width: 100%;
}
#section1 img {
object-fit: cover;
position: relative;
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
#section2 {
grid-area: section2;
border: 1px solid red;
}
#section3 {
grid-area: section3;
border: 1px solid red;
}
#section4 {
grid-area: section4;
border: 1px solid red;
}
#footer {
grid-area: footer;
border: 1px solid red;
}
<main id="main">
<header id="title">
<h1> Allen Iverson</h1>
</header>
<section id="section1">
<div id="img-div">
<figure>
<img src="https://fsa.zobj.net/crop.php?r=FwHUQXbzIfSpz4awUIaTcY3NIgHVe1mSFMPlsB6rpnNmbj9mHPRpVHtH7c8RgxuGUffOqlWYgSbRNw4hXsKEL4NpVjgwRglygtByR-SVELuRZrvPVOfhBVpCkcS0FNh74XcecRFJpdkNtQwOy_rZO2Ftc5H606i6-pDgEjbe2Aqrn3yUNiwkTPLkq34" alt="">
<figcaption>
It's not about size, it's about size of your heart
</figcaption>
</figure>
</div>
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<section id="section4">
</section>
<footer id="footer">
I am a Footer
</footer>
</main>

Answer 1

You should remove the #img-div. Convert the figure to a flexbox, and constrain it's height:
#section1 figure {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0.5em;
box-sizing: border-box;
}
Set the imgs flex to 1, and use min-height: 0 to let it shrink:
#section1 img {
display: block;
object-fit: scale-down;
max-width: 100%;
flex: 1;
min-height: 0;
}
Example (click run and then full page):
#main {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 250px 300px 300px auto;
grid-gap: 10px;
background-color: white;
grid-template-areas: "header header header header" "section1 section2 section3 section4" "footer footer footer footer";
}
#title {
grid-area: header;
border: 1px solid red;
background-color: red;
text-align: center;
}
#section1 {
grid-area: section1;
border: 1px solid red;
}
#section1 figure {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0.5em;
box-sizing: border-box;
text-align: center;
}
#section1 img {
object-fit: scale-down;
max-width: 100%;
flex: 1;
min-height: 0;
}
#section2 {
grid-area: section2;
border: 1px solid red;
}
#section3 {
grid-area: section3;
border: 1px solid red;
}
#section4 {
grid-area: section4;
border: 1px solid red;
}
#footer {
grid-area: footer;
border: 1px solid red;
}
<main id="main">
<header id="title">
<h1> Allen Iverson</h1>
</header>
<section id="section1">
<figure>
<img src="https://fsa.zobj.net/crop.php?r=FwHUQXbzIfSpz4awUIaTcY3NIgHVe1mSFMPlsB6rpnNmbj9mHPRpVHtH7c8RgxuGUffOqlWYgSbRNw4hXsKEL4NpVjgwRglygtByR-SVELuRZrvPVOfhBVpCkcS0FNh74XcecRFJpdkNtQwOy_rZO2Ftc5H606i6-pDgEjbe2Aqrn3yUNiwkTPLkq34" alt="">
<figcaption>
It's not about size, it's about size of your heart
</figcaption>
</figure>
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<section id="section4">
</section>
<footer id="footer">
I am a Footer
</footer>
</main>