Crop images with CSS (cover)

How to align cropped image from both sides to the center, which also is scaled to its height? Or just center cropped image? (see 4, 5, 6, 7 )

by lovromar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>1.</h3>
<figure><img src="http://placekitten.com/250/300"/></figure>
<figure><img src="http://placekitten.com/300/250"/></figure>
<figure><img src="http://placekitten.com/300/300"/></figure>

<h3>2.</h3>
<figure class="scale"><img src="http://placekitten.com/250/300"/></figure>
<figure class="scale"><img src="http://placekitten.com/300/250"/></figure>
<figure class="scale"><img src="http://placekitten.com/300/300"/></figure>

<h3>3.</h3>
<figure class="scale towidth"><img src="http://placekitten.com/250/300"/></figure>
<figure class="scale towidth"><img src="http://placekitten.com/300/250"/></figure>
<figure class="scale towidth"><img src="http://placekitten.com/300/300"/></figure>

<h3>4.</h3>
<figure class="scale toheight"><img src="http://placekitten.com/250/300"/></figure>
<figure class="scale toheight"><img src="http://placekitten.com/300/250"/></figure>
<figure class="scale toheight"><img src="http://placekitten.com/300/300"/></figure>
<h3>5.</h3>
<figure class="scale towidth toheight"><img src="http://placekitten.com/250/300"/></figure>
<figure class="scale towidth toheight"><img src="http://placekitten.com/300/250"/></figure>
<figure class="scale towidth toheight"><img src="http://placekitten.com/300/300"/></figure>

<h3>6.</h3>
<figure class="cover"><img src="http://placekitten.com/250/300" style="background-image: url(http://placekitten.com/250/300)"/></figure>
<figure class="cover"><img src="http://placekitten.com/300/250" style="background-image: url(http://placekitten.com/300/250)"/></figure>
<figure class="cover"><img src="http://placekitten.com/300/300" style="background-image: url(http://placekitten.com/300/300)"/></figure>

<h3>7.</h3>
<figure class="cover scale towidth"><img src="http://placekitten.com/250/300" style="background-image: url(http://placekitten.com/250/300)"/></figure>
<figure class="cover scale towidth"><img...

CSS

/* For three images with minimum size: 100px x 200px */
body { min-width: calc( 300px + 7em ); max-width: 960px; margin: 0 auto; }
img {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    
    outline: red solid 1px;
    opacity: .5;
}
.scale img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
.towidth img{
    max-height: none;
    display: inline-block;
}
.towidth::before{
    content: ".";
    overflow: hidden;
    display:inline-block;
    vertical-align: middle;
    width: 0;
    height:100%;
    background: green;
    margin: 0 auto;
}
.toheight img{
    max-width: none;
}
h3 {
clear: both;
}
figure:hover {
  overflow: visible;
}
figure {
  overflow: hidden;
  display:block;
  white-space: nowrap;

  /* Three images per line, each 1/3 of viewpoint width (where minimum width size is 100px) and 200px per height */
  min-width: 100px;
  width: 100%;
  max-width: calc( 30% - 2em );
  height: 200px;
    
  float: left;
  margin: 1em;
  
  outline: blue solid 1px;
  padding: 2px;
  position: relative;
}
.towidth img{
    top: 50%;
    margin-top:-200px;
}
.cover img {
    display:none;
}
.cover img {
    content: '';
    background-position: center center;
    background-size: cover;
    display:inline-block;
    width: inherit;
    height: inherit;
}