Responsive Image with Aspect-Ratio - CSS

Responsive image strategy with aspect-ratio on mobile gets square images and any landscape screen or device gets landscape images. Change the inline-size to width and play around with length values that fit the design.

HTML

<img class="aspect-image" src="https://picsum.photos/1080/720" alt="">

CSS

.aspect-image {
  aspect-ratio: 1/1;
  width: 80vw;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: aspect-ratio .5s ease
}
@media (orientation: landscape) {
    .aspect-image {
      aspect-ratio: 16/9;
    }
  }