<section class="examples">
  <figure class="original">
    <img class="original-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/400x300/" alt="Original Image" />
    <figcaption>Original Image</figcaption>
  </figure>
  <figure>
    <img class="cropped-image scale-down-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/400x300/" alt="object-fit: scale-down Looks Like object-fit: contain for Smaller Containers" />
    <figcaption><code>object-fit: scale-down</code> Looks Like <code>object-fit: contain</code> for Smaller Containers</figcaption>
  </figure>
  <figure>
    <img class="cropped-image large-container scale-down-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/400x300/" alt="object-fit: scale-down Looks Like object-fit: none for Larger Containers" />
    <figcaption><code>object-fit: scale-down</code> Looks Like <code>object-fit: none</code> for Larger Containers</figcaption>
  </figure>
</section>

:root {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.examples {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  padding: 1em;
}

figure {
  margin: 0;
  margin-right: 1em;
  width: min-content;
}

.cropped-image {
  width: 200px;
  height: 200px;
  border: 3px solid #bbb;
}

.scale-down-image {
  object-fit: scale-down;
}

.large-container {
  width: 400px;
  height: 400px;
}