<img class="original" src="https://sabe.io/classes/css/hero.png" />
<div class="cropped-1">
  <img src="https://sabe.io/classes/css/hero.png" />
</div>
<img class="cropped-2" src="https://sabe.io/classes/css/hero.png" />

.original {
  display: block;
  margin: 0 auto;
  width: 500px;
}

.cropped-1 {
  overflow: hidden;
  position: relative;
  margin: 10px auto 0 auto;
  height: 100px;
  width: 500px;
}

.cropped-1 img {
  display: block;
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%
}

img.cropped-2 {
  display: block;
  margin: 10px auto 0 auto;
  width: 500px;
  height: 100px;
  object-fit: cover;
  object-position: 0 -110px;
}