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.
Top comments (0)