<h2>Maintaining Image Aspect Ratio</h2>

<div class="gp"><div class="parent"><img class="child" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1693449822nature.jpg.jpg"></div></div>

<div class="gp"><div class="parent"><img class="child" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1693449817city.jpg"></div></div>

<div class="gp"><div class="parent"><img class="child" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1693449825people.jpg"></div></div>

<div class="gp"><div class="parent"><img class="child" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1693449827sport.jpg"></div></div>

body {
  font-family: Lato;
  margin: 10px;
  font-size: 1.4em;
  text-align: center;
}

.gp {
  width: 45%;
  display: inline-block;
  margin: 10px auto;
}

.parent {
  display: inline-block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 56.25% 0 0 0;
  overflow: hidden;
  background: black;
}

.child {
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}