3

I'm trying to responsively crop a YouTube 4:3 thumbnail image, which includes black bars, down to 16:9, but I'm not achieving the exact aspect ratio. For some reason, despite being a 1080p video, the highest res image I can get is 640x480.

HTML:

<figure class="sixteen-nine-img">
    <img src="https://i.ytimg.com/vi/kTnvan3vws4/sddefault.jpg" alt="Video: Lincoln Center Festival 2017: George Balanchine's JEWELS">
</figure>

CSS:

figure.sixteen-nine-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
}

figure.sixteen-nine-img img {
  display: block;
  margin: -21.875% 0;
  width: 100%;
}

Demo: CodePen

2
10

You can absolutely position and center the image in the container, then make the parent height 16:9 responsively by using %-based padding top/bottom that represents the 16:9 ratio (9/16 = 56.25%)

figure.sixteen-nine-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-top: 56.25%;
  position: relative;
}
figure.sixteen-nine-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
<figure class="sixteen-nine-img">
    <img src="https://i.ytimg.com/vi/kTnvan3vws4/sddefault.jpg" alt="Video: Lincoln Center Festival 2017: George Balanchine's JEWELS">
</figure>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.