Aspect Ratio - Native image scaling

by PrismDan

HTML

<figure>
  <figcaption>600 x 400 image</figcaption>
  <img src="//source.unsplash.com/600x400/?landscape" width="600" height="400" alt="" />
</figure>


<div class="container">
  <figure>
    <figcaption>600 x 400 image in a smaller container without responsive properties</figcaption>
    <img src="//source.unsplash.com/600x400/?landscape" alt="" class="no-aspect-preservation" />
  </figure>
</div>


<div class="container">
  <figure>
    <figcaption>600 x 400 responsive image in a smaller container</figcaption>
    <img src="//source.unsplash.com/600x400/?landscape" width="600" height="400" alt="" />
  </figure>
</div>

CSS

body {
  background-color: #023e50;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  color: #fff;
  font-family: monospace;
  display: grid;
  gap: 2em;
  place-content: center;
  padding: 2em;
  min-height: 100vh;
  text-align: center;
  box-sizing: border-box;
}

figure {
  margin: 0;
  position: relative;
  border: 1px dashed rgba(255, 255, 255, .25);
  padding: 1em;
  overflow: hidden;
}

figcaption {
  margin-bottom: 1em;
}

img:not(.no-aspect-preservation) {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 300px;
  width: 75%;
}