How to scale down an image on both width and height with respect to aspect ratio

Question

How can I scale down an image on both width and height sides with respect to aspect ratio without using the object-fit property?

Answer 1

Solution

:root {
  --imageWidth: 300;
  --imageHeight: 150;
}

.image-container {
  max-width: calc(var(--imageWidth) * 1px);
  max-height: 100%;
  aspect-ratio: var(--imageWidth) / var(--imageHeight);
}

.image {
  display: block;
  height: 100%;
  aspect-ratio: var(--imageWidth) / var(--imageHeight);
}

.resize-wrapper {
  display: inline-block;
  resize: both;
  overflow: hidden;
  border: 1px solid black;
}

<div class="resize-wrapper">
  <div class="image-container">
    <img src="https://placehold.co/300x150/svg" class="image" />
  </div>
</div>