center crop style

by shengoo

HTML

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x300');">
</div>
<div class="center-cropped-scaled" 
     style="background-image: url('http://placehold.it/300x200');">
</div>

CSS

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
.center-cropped-scaled {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}