<section class="examples">
  <figure>
    <img class="cropped-image none-image position-left-top" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-position: left top" />
    <figcaption><code>object-position: left top</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image none-image position-70-15" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-position: 70% 15%" />
    <figcaption><code>object-position: 70% 15%</code></figcaption>
  </figure>
  <figure>
    <img class="cropped-image none-image position-right-45" src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/600x450/" alt="object-position: right 45%" />
    <figcaption><code>object-position: right 45%</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: 220px;
  height: 220px;
  border: 3px solid #bbb;
}

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

.position-left-top {
  object-position: left top;
}

.position-70-15 {
  object-position: 70% 15%;
}

.position-right-45 {
  object-position: right 45%;
}