How to increase Image Height while maintaining image aspect ratio

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>