Cropped image 3

by Simon Hi

HTML

<div class='magic-div'>
  <img class='magic-img' src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Lepidoptere.jpg">
</div>
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.

CSS

body {
  margin: 2em;
  padding: 0;
}
/* .magic-div will be a square */
.magic-div{
    position: relative;
    overflow: hidden;
}
.magic-div:before{
    content: "";
    display: block;
    /* 19/9: padding-top 56.25% */
    /* square: padding-top 100% */
    padding-top: 100%;
}
/* .magic-img will fit its parent */
.magic-img{
    position:  absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    /* actual image ratio: 3:4 */
    /* to center vertically (if square): */
    /* translateY: ((3/4)*100%)/2 */
    transform:translateY(-12.5%);
}