Cropped image 4

by Simon Hi

HTML

<h1>Cropper</h1>
<h2>Cropped image (16:9)</h2>
<div class='cropper r16-9'>
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Lepidoptere.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Cropped image (1:1)</h2>
<div class='cropper r1-1'>
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Lepidoptere.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Original image (3:4)</h2>
<img class="original-img" src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Lepidoptere.jpg">

CSS

body {
  margin: 2em;
  padding: 0;
}

/* .cropper will be a square */
.cropper {
  position: relative;
  overflow: hidden;
}

.cropper:before {
  content: "";
  display: block;
}

.cropper:before {
  /*  padding-top: the only one property to change */
  /* 1:1 (square): padding-top 100% */
  /* 16:9: padding-top 56.25% */
  /* x:y: padding-top (y/x)*100% */
  /* defaut: 1:1 ratio */
  padding-top: 100%;
}

.cropper.r16-9:before {
  /* 16:9 ratio */
  padding-top: 56.25%;
}

/* visible part of .cropper img will be cropped to its parent size */
/* and will be centered vertically */
.cropper img {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

/* as is img */
.original-img {
  width: 100%;
}