<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.