Image Resolutions in CSS
Tags: css, design, webdev
Published: 2020-03-05 14:27:56

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!

![Original](https://dev-to-uploads.s3.amazonaws.com/i/tt7ozeh9zi3304789kms.jpg)

### 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.

![2.22:1](https://dev-to-uploads.s3.amazonaws.com/i/c6hk1ahnpxo6k4q8ze2n.jpg)

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`.

![1.85:1](https://dev-to-uploads.s3.amazonaws.com/i/gd5d8hhptl3bhia84unq.jpg)

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.

![1.33:1 bars with 2.22:1 image](https://dev-to-uploads.s3.amazonaws.com/i/3k1vr9v9fbrkvod8pw71.jpg)

```
.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`.

![1.85:1 bars with 2.22:1 image](https://dev-to-uploads.s3.amazonaws.com/i/cgow3y3dbpzn38rvkq7h.jpg)

```
.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:

![1.33:1 bars with 1.85:1 image](https://dev-to-uploads.s3.amazonaws.com/i/f8najy99h931jgjwc2uz.jpg)

```
.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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is great for layouts, especially when you want to do something like add cinematic bars to an image.