Live
x
<img class="img" src="https://satyr.dev/300x300?text=IMG (original)" width="300" height="300" alt="Image…"><img class="img img--cut" src="https://satyr.dev/300x300?text=IMG (cropped)" width="300" height="200" alt="Image…">
Live
xxxxxxxxxx17
.img--cut { object-fit: cover; object-position: bottom;}/* etc: */body { display: flex; flex-wrap: wrap;}.img { padding: 10px;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.