<html>
<head>
  <style>
    .inline-block {
      display: inline-block;
      margin: 10px;
      background-color: yellow;
    }
    .image-cropper {
      position: relative;
      overflow: hidden;
      border: 0px red solid;
    }
    .fixed-container {
      height: 80px;
      width: 80px;
    }
    .fixed-thick-container {
      height: 120px;
      width: 120px;
    }
    .centered-out {
      position: absolute;
      left: -10;
      top: -10;
    }
    .cenetered-in {
      position: absolute;
      left: 10;
      top: 10;
    }
    .scaled-down {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
    }
    .scaled-up {
      transform: scale(1.333);
      -webkit-transform: scale(1.333);
    }
  </style>
</head>
<body>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
  <br>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
  <br>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
  <div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
</body>
</htm>