object-position

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/moon.jpg" />
</section>

#example-element {
  height: 250px;
  width: 250px;
  object-fit: none;
  border: 1px solid red;
}

/* キーワード値 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* <percentage> 値 */
object-position: 25% 75%;
/* <length> 値 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* 縁からのオフセット値 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* グローバル値 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}
#object-position-1 {
  object-position: 10px;
}
#object-position-2 {
  object-position: 100% 10%;
}