I have a site displaying mixed thumbnail images based on content created by the client consisting of either a featured image (sized via WordPress), YouTube thumbnails or a proxy image (static size). The featured image and proxy images are 16:9 sized images so there’s no problem there. YouTube thumbnail images, specifically hqdefault, are sized as 4:3 thus ruining the grid layout on the page I have all this content eventually displaying on. I wanted to find a low bandwidth solution to crop the YouTube thumbnails since the site was already looking to be on the heavy end. Without further adieu, my solution:

hqdefault = 4:3 = 0.75 = 75% // pre-crop images

16:9 = 0.5625 = 56.25% // cropped images

75% - 56.25% = 18.75% // difference in size

Now we take that difference in size, divide it in half and add that to the image as negative margins. Which creates our “crop”

18.75% / 2 = 9.375%

// HTML
<figure>
  <img src="https://img.youtube.com/vi/YOUR_VIDEO_ID/hqdefault.jpg" alt="">
</figure>

// SCSS
figure {
  overflow:hidden;

  img {
    margin:-9.375% 0;
    display:block;
    width:100%;
    height:auto;
  }
}

Codepen example.

Published on February 17, 2017