Can I make grid responsive based on image movement in css grid? - html

Question

I'm working on a css grid where the template is as follows:
grid-template-columns: 70% 30%;
grid-template-areas:
"hero info"
"hero map"
"home home";
Within the hero, there is an image and when moving the window to check responsiveness, the image gets to the point where it has a shorter height than the grid allows. Is there any way I can have the "info" and "map" section shrink along with the image? I imaging I would need to have the div resize rather than the image, but nothing has worked so far.
Here is the space that I'm referring to, where as the browser window shrinks, this white space appears.
Here is the codepen
And the snippet is below. I do have a media query in place so that the layout changes as the browser goes smaller, but currently this is happening before the breaking point. I'm wondering if it can be done without changing up the breaking point of the media query.
body,
html {
margin: 0;
padding: 0;
}
/*navbar for window viewing purposes */
nav {
height: 41px;
background-color: rgba(200, 200, 200, 0.5);
}
.home-wrapper {
background-color: #e6e6e6;
width: 100%;
grid-area: home;
}
.home-container {
width: 80%;
margin: auto;
padding-bottom: 40px;
}
#main-map {
grid-area: map;
max-width: 96%;
max-height: 100%;
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
#main-map iframe {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0px 5px 0px 5px;
}
#info {
margin: 10px;
grid-area: info;
}
.hero {
margin: auto;
max-width: 1940px;
position: relative;
grid-area: hero;
}
.hero img {
display: block;
height: auto;
width: 100%;
object-fit: cover;
object-position: center;
}
.home {
display: grid;
grid-template-columns: 70% 30%;
grid-template-areas:
"hero info"
"hero map"
"home home";
}
/* Query */
#media (max-width: 1040px){
.home {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"hero hero"
"home home"
"info map";
}
<nav>
</nav>
<div class="home">
<div class="hero" >
<img src="https://picsum.photos/1164/560">
<span></span>
</div>
<div id="info">
<p>
Location address <br><br>
1111 Main Street <br />
Salt Lake City, UT 11111 <br /><br />
P.O. Box 111 <br />
Sale Lake City, UT 11111 <br /><br />
111.111.1111 <br />
Fax [phone] <br />
</p>
</div>
<div id="main-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3007.5980492403837!2d-112.45179968409789!3d41.077778023093046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDHCsDA0JzQwLjAiTiAxMTLCsDI2JzU4LjYiVw!5e0!3m2!1sen!2sus!4v1574099632743!5m2!1sen!2sus" frameborder="0" style="border:0;"></iframe>
</div>
<div class="home-wrapper">
<div class="home-container">
<div id="home-about">
<h3>Our Business</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, necessitatibus.
states. <br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt atque, facilis deleniti eius non culpa delectus? Eos placeat sit alias!
<br /><br />
orem ipsum dolor sit amet consectetur adipisicing elit. Sunt atque, facilis deleniti eius non culpa delectus? Eos placeat sit alias!
<br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis repudiandae temporibus ut! Esse asperiores libero eum quia, optio nostrum commodi similique consequuntur ad sapiente saepe suscipit provident, molestias est quisquam qui culpa nihil totam earum. Officia aliquam praesentium rerum beatae.
<br /><br />
Our Business <br /><br />
Salt Lake City Utah
</p>
<form action="contact.html">
<button class="btn btn3">Contact Us</button>
</form>
</div>
</div>
</div>
</div>

Answer 1

Using object-fit:fill or object-fit:cover seemed to help for me. Although I was getting weird inconsistencies with codepen. Please let me know if that helps.
.hero {
max-width: 1940px;
position: relative;
grid-area: hero;
}
.hero img {
display: block;
height: 100%;
width:100%;
object-fit: fill;
object-position: center;
}