CodePen Embed - object position

<img class="fill" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

<img class="contain" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

<img class="cover" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

<img class="cover kwd" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

<img class="cover percent" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

<img class="cover length" src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85" alt="Image" width="150" height="150">

img {
  border: solid 1px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.kwd {
  object-position: top right;
}

.percent {
  object-position: 25% 25%;
}

.length {
  object-position: -60px 0px;
}

Run Pen

This Pen is owned by Eric Hu on CodePen.

See more by @ericnanhu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.