<section class="examples">
  <figure class="original">
    <img class="original-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="Original Image" />
    <figcaption>Original Image</figcaption>
  </figure>
  <figure>
    <img class="cropped-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="No object-fit Set Explicitly Works Like object-fit: fill" />
    <figcaption>No <code>object-fit</code> Set Explicitly Works Like <code>object-fit: fill</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image fill-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-fit: fill" />
    <figcaption><code>object-fit: fill</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image contain-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-fit: contain" />
    <figcaption><code>object-fit: contain</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image cover-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-fit: cover" />
    <figcaption><code>object-fit: cover</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image none-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-fit: none" />
    <figcaption><code>object-fit: none</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image scale-down-image" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-fit: scale-down" />
    <figcaption><code>object-fit: scale-down</code></figcaption>
  </figure>
</section>

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

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

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

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

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

.fill-image {
  object-fit: fill;
}

.contain-image {
  object-fit: contain;
}

.cover-image {
  object-fit: cover;
}

.none-image {
  object-fit: none;
}

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