Live
x
<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>
Live
xxxxxxxxxx44
.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.