cssで画像トリミング

See the Pen cssで画像トリミング by takapen (@takapen) on CodePen.

* {margin: 0;padding: 0;}
div{
  width: 300px;
  background:#ccc;
}

/* 真ん中固定 */
.test1{
  width: 100%;
  padding-top: 50%;
  overflow: hidden;
  position: relative;
}
.test1 img{
  max-width: 200%;/* 画像サイズ固定 */
  max-height: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 上固定 */
.test2 {
  width: 100%;
  padding-top: 50%;
  overflow: hidden;
  position: relative;
}
.test2 img{
  max-width: 200%;
  max-height: 200%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}