<h1>The <code>object-position</code> Property</h1>

<h2>At Dimensions : 260px*200px</h2>
<figure>
  <img class="first cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/sunset.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="first cover zero-zero" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/sunset.jpg" />
  <figcaption><code>Position: 0% 0%</code></figcaption>
</figure>

<h2>At Dimensions : 260px*400px</h2>
<figure>
  <img class="second cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/sunset.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="second cover zero-zero" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/sunset.jpg" />
  <figcaption>Position: 0% 0%</figcaption>
</figure>

body {
  text-align: center;
}

h2 {
  margin-top: 50px;
}

figure {
  position: relative;
  display:inline-block;
  margin:0; 
}

figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  background: black;
  color: white;
  padding: 5px 10px;
}

.first {
  width: 260px;
  height: 200px;
  background: red;
}

.second {
  width: 260px;
  height: 400px;
  background: yellow;
}

.cover {
  object-fit: cover;
}

.zero-zero {
  object-position: 0% 0%;
}