How to increase Image Height while maintaining image aspect ratio - html

Question

I would like to increase the height of my images to 400px. However the images don't fill the div while maintaining the aspect ratio.
I previously added height:100% to my images while adding a fixed height of 400px to my parent div, then adding object-fit: cover to the images. However, on page resize, the images do not maintain their ratio and instead squash / collapse.
Any help would be great. Thank you.
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#picwrapper {
width: 85%;
}
#media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
#media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
max-width: 100%;
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>

Answer 1

In what follows, I'm making some assumptions about what you're after.
I'm assuming that you want the images to maintain their aspect ratio (4:3) at all times, but still scale larger and smaller proportionally as the screen grows/shrinks.
Below, you'll find a different implementation of your code, but one that I think captures what you're going for. At least, maybe it'll get you going in the right direction.
(BTW, Credit to Andy Bell for this aspect ratio technique. See here: https://andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/)
[class*="aspect-ratio-"] {
display: block;
position: relative;
width: 100%;
}
[class*="aspect-ratio-"] > * {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.aspect-ratio-tv {
padding-top: 75%; /* 4:3 */
}
.gallery {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.gallery {
width: 100%;
}
.gallery li {
flex-basis: 100%;
}
#media screen and (min-width: 580px) {
.gallery li {
flex-basis: 50%;
}
}
#media screen and (min-width: 960px) {
.gallery li {
flex-basis: 33.33333%;
}
}
.gallery img {
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-text {
color: white;
font-size: 20px;
text-decoration: none;
}
.overlay:hover {
opacity: 1;
text-decoration: none;
}
<ul class="gallery">
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/phvbkGThElM/800x600" alt="A neon ferris wheel" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/H_mTtLykvKs/800x682" alt="A dimly lit drum kit" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/Hc42xXu_WOg/800x567" alt="Blueberries, close up" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/MfynxC5_tiU/800x999" alt="High angle waterfall" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/7ZTx1iA7a7Q/800x397" alt="Sunset coastal scence" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/pRvy1j4aINE/800x785" alt="High angle shot of a recording studio" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
</ul>
See here for a pen: https://codepen.io/anon/pen/oOeBOj

Answer 2

Dont specify a width, just height.
.moon
{
height: 100%;
}

Answer 3

Specifying a width and height will squash the images; just specify the height.
img {
height: 50%; /*Change this to what you want.*/
}
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
#media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>