Core Code
Core Code Modern Dev Handbook

Gallery Thumbnail Focus

Use object-position to highlight important areas in thumbnails.

Preview

Code

<style>
.gallery img{
width:120px;
height:90px;
object-fit:cover;
object-position:center top;
margin:5px;
}
</style>

<div class="gallery">
<img src="https://via.placeholder.com/400x250">
<img src="https://via.placeholder.com/300x300">
<img src="https://via.placeholder.com/500x250">
</div>

More CSS object-position Examples (8)

example Object Position Center open example example Object Position Top open example example Object Position Bottom open example example Object Position Left open example example Object Position Right open example example Custom Object Position open example example Avatar Focus Example open example example Hover Position Change open example