Image Resolutions in CSS

This week's post will be a short one. The idea came about while offering suggestions for a dear friend's blog, mostly around typography and space. It's funny, I found it hard to describe typography with words, the irony, but while making suggestions and tweaking the layout, I had an idea.

One of the images on his example blog post was taken during a recent business trip, but at 5184x3888 it had an aspect ratio of 1.33:1 and didn't fit very well within the text. I felt it was too... tall!

Object fit, 60% width

So I thought, well, let's squash it a bit then, and set the height to 60% and used object-fit to ensure it didn't distort. I found this made it fit better within the text, but then I had a further idea.

At 60% height, the 5184x3888 (1.33:1) image retains a width of 5184 but then has a height of 2332. If we normalise this to make it easier to work with, we have an original image of 1000x750. Reducing the height by 40% gives us 450, resulting in an image of 1000x450 and an aspect ratio of 2.22:1.

Cinematic resolution

I looked up the standard cinema resolution, which is 1.85:1. This means that if we want to have a cinematic feel to it, our image should ideally be 1000x540 (1.85:1). Note, 540 is 72% of 750.

As you can see, at 72%, the image isn't ask skinny as the 60% version, but also, it doesn't really feel as cinematic, does it? It's time to add some bars!

Bars

The first thing I tried was to take the original image resolution (1.33:1) and place the 60% resolution (2.22:1) on top of it, but alas, that didn't really give the right result.

.image-1p33-60pc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: black;
  margin: 1rem auto;

  // 1.33:1
  width: 52rem;
  height: 40rem;

  img {
    width: 100%;
    height: 60%;
    object-fit: cover;
  }
}

So next, I tried to slim down the bars by putting the 2.22:1 image on top of the 1.85:1 image, with a black background of course to create the bars, but this didn't look right either, it felt too skinny. This required some extra calculation.

1.33:1 is equal to 1000x750
1.85:1 is equal to 1000x540
2.22:1 is equal to 1000x450

So if we want to place a 1.33:1 image into a 1.85:1 container and have it assume the 2.22:1 resolution, we have to divide the 2.22:1 height (450) by the 1.85:1 height (540) which gives us 0.83.

.image-1p85-83pc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: black;
  margin: 1rem auto;

  // 1.85:1
  width: 52rem;
  height: 28rem;

  img {
    width: 100%;
    height: 83%;
    object-fit: cover;
  }
}

Next I tried to put a 1.85:1 image into a 1.33:1 container:

.image-1p33-72pc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: black;
  margin: 1rem auto;

  // 1.33:1
  width: 52rem;
  height: 40rem;

  img {
    width: 100%;
    height: 72%;
    object-fit: cover;
  }
}

At this point, my friend had already taken my typographical feedback and made some changes and I was left here with a page full of scribbles and calculations, a headache, and a little bit confused as to what I was trying to achieve.

But I also learned that flexbox is great for layouts, especially when you want to do something like add cinematic bars to an image.