<div class="item">
  <h2>Original image</h2>  
  <p>
    <img src="http://satyr.io/150x150?text=Abc" width="150" height="150" alt="Image…">
  </p> 
</div>  

<div class="container">

  <div class="item">  
    <h2><code>object-position: 50% 50%</code> (initial)</h2>
    <p class="box">
      <img src="http://satyr.io/150x150?text=Abc" width="300" height="200" alt="Image…">
    </p>  
  </div>   
  
  <div class="item item--0-0">  
    <h2><code>object-position: 0 0</code></h2>
    <p class="box">
      <img src="http://satyr.io/150x150?text=Abc" width="300" height="200" alt="Image…">
    </p>  
  </div>  
  
  <div class="item item--bottom-minus-50">  
    <h2><code>object-position: 0 -50px</code></h2>
    <p class="box">
      <img src="http://satyr.io/150x150?text=Abc" width="300" height="200" alt="Image…">
    </p>  
  </div>     
  
  <div class="item item--top-right">  
    <h2><code>object-position: top right</code></h2>
    <p class="box">
      <img src="http://satyr.io/150x150?text=Abc" width="300" height="200" alt="Image…">
    </p>  
  </div>     
  
  <div class="item item--bottom">  
    <h2><code>object-position: bottom</code></h2>
    <p class="box">
      <img src="http://satyr.io/150x150?text=Abc" width="300" height="200" alt="Image…">
    </p>  
  </div>     
 
  
</div>
.item--0-0 img {
  object-position: 0 0;
}

.item--bottom-minus-50 img {
  object-position: 0 -50px;
}

.item--top-right img {
  object-position: top right;
}

.item--bottom img {
  object-position: bottom;
}


/* etc: */

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 10px;
}

.box {
  background: #d8f5b8;
  border: #5fa316 5px solid;
  width: 300px;
}

.box img {
  object-fit: none; 
  display: block;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.