Applying image to grid - html

Question

I have a grid layout. I'm trying to apply an image to the box on the left. It only fills 3 quarters of the box and leaves space at the bottom. Is there any way I can get the image to fill the entire div and be responsive as it should. I initially wanted to add a slideshow which was the same problem. Also, my other issue is the 4 smaller boxes. The text falls outside of the boxes when making the screen smaller. Hoping someone has positive feedback for me :)
I tried to extend the height of the image but obviously distorts the image
<!-- run local host
1) cd and drag drop file
2) type: python -m SimpleHTTPServer 8080
3) browser type: http://localhost8080
-->
<!-- to make a comment: cmd and / -->
<!-- to shift a section cmd + ] on mac or CTRL + ] on wondows -->
.grid {
display: grid;
grid-template-columns: 6fr 2fr 2fr;
grid-template-rows: 200px 200px 400px;
grid-gap: 20px;
grid-template-areas:
"one two three"
"one four five"
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.grid > article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
.text > h3 > {
text-align: center;
}
<!-- wrapper start -->
<!-- header start -->
<div class="wrapper">
<div class="header">
<!-- nav bar -->
<ul class="nav-container">
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Contact</li>
<li>Login</li>
</ul>
<!-- nav bar -->
<header id="top" class="top-image">
<h1 style="color: white">Code To Program</h1>
<p style="color: white">Web Design | SEO | Tutorials</p>
Contact Us
</header>
</div>
<!-- header finish -->
<!-- header 2 start -->
<div class="header-2">
<h2 style="color: lightslategrey; font-size: 3rem; text-align: center">Our Services</h2>
</div>
<!-- header 2 finish -->
</style>
<div class="container">
<main class="grid">
<article class="one" style="height: 420px">
<img class="imgs" src="img/pdx.jpg">
</article>
<article class="two">
<div class="text">
<h3>2 Web Design</h3>
<figure>
<img src="img/seo.png" alt="Smiley face" height="72" width="72">
</figure>
</div>
</article>
<article class="three">
<div class="text">
<h3>3 SEO</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Read more</button>
</div>
</article>
</br>
<article class="four">
<div class="text">
<h3>4 Blog</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Just do it...</button>
</div>
</article>
<article class="five">
<div class="text">
<h3>Tutoring</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Here's why</button>
</div>
</article>
</main>
</div>
Back to top »
<script src="accordian.js"></script>
<footer style="background-color: brown">
<p>This is the footer</p>
<p>© 2019 Desmond Dallas</p>
</footer>

Answer 1

You are looking for object-fit.
This will solve your problem:
.grid > article img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}