<div class="container aspect-ratio-container">
  <h3>aspect-ratio</h3>
  <div class="image-wrap">
    <img src="https://imgur.com/W7xqcWS.png" />
  </div>
  <small>source: https://unsplash.com/</small>
</div>

<div class="container padding-bottom-container">
  <h3>padding-bottom</h3>
  <div class="image-wrap">
    <img src="https://imgur.com/W7xqcWS.png" />
  </div>
  <small>source: https://unsplash.com/</small>
</div>
.container {
  max-width: 500px;
  margin: 0.5rem auto;
}
.image-wrap {
  overflow: hidden;
  margin-bottom: 2px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
small{
  font-size: 12px;
  color: gray;
}

// aspect-ratio
.aspect-ratio-container {
  .image-wrap {
    aspect-ratio: 4 / 3;
  }
}

// padding-bottom
.padding-bottom-container {
  .image-wrap {
    position: relative;
    padding-bottom: 75%;
  }
  img {
    position: absolute;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.