Prevent Cropping on Background Images and Videos (maintain aspect ratio)
Recently, I saw this post from Kyle in the Ghost & Friends Facebook Group (very much worth joining if you use Ghost’s Plugins).
Simply put, this is a question about maintaining the aspect ratio of a full-width image. So let’s figure out how this is done.
As an aside, this is now an option on my Sliding Image Banner Plugin, where you can keep the background image’s aspect ratio.
Quick Answer
The answer is relatively simple, it’s just one line of CSS.
[data-section-id="ID_HERE"] {
min-height:clamp(0px, 56.25vw, 100vh) !important;
}
How it works
The value that you can adjust is that 56.25 value. This is what controls the aspect ratio of your background image.
An aspect ratio is just the height of an image divided by its width.
Aspect Ratio = Height / Width
Since we know the width of a full screen image is always going to be 100vw (100% the width of the screen) and, presumably, we know the aspect ratio of our image. We can just multiple these two together to get the height.
So a 9 / 16 aspect ratio image comes out to be (9 / 16) x 100vw = 56.25vw
Math is hard though, so here is a value chart you can use to figure out which value you should use for your picture.
56.25vw
75vw
66.67vw
41.67vw
But there is a LOT happening in that one line of CSS from above. So let’s break it down.
Understanding min-height
The S / M / L options for the Section Height adjust the min-height of the section.
Let’s take this code apart step by step. First up, the min-height property.
Each section in Squarespace has a min-height property associated with it. It’s this property in fact that’s getting adjusted as you toggle the S / M / L toggles in the section editor to change the section height.
We use the min-height property instead of the height property because we don’t know how much content is going to be added to the section.
Assume this value: min-height: 700px;
It’s saying, “Set the minimum height of this section to be 700 pixels tall, but feel free to be taller than that if you need to be.”
The height property would make the height static, and wouldn’t grow if we had more content, it would just overflow onto our section below.
Another sidenote about the min-height and height property. If you set two conflicting values, the min-height value wins out.
.item {
min-height:700px;
height:400px;
}
In this example, the height of the .item element would be at least 700 pixels tall.
Understanding clamp()
Clamp is a super powerful CSS function that allows us to set upper and lower limits to a value. That’s a mouthfull, so let’s break that down.
One of the best use cases for this is font-size. Open up the below link in a new window and adjust the width of the screen.
In this example, our font-size changes based on the width of the screen. As you can see, the font size won’t get smaller than 32px and it won’t get larger than 64px, but in-between it will take what is called the ‘preferred value’, which will adjust dynamically based on the width of the screen.
We can also use a clamp function for the height of a box. Open up the below link in a new window and adjust the width of the screen.
Notice how the section won’t get any smaller the 30vh (30% the height of the screen) and won’t get taller than 75vh. But, when possible, it will try to be 56.26vw which is our 9 / 16 aspect ratio.
So this is what our clamp() function is doing from our code at the beginning of this article, it’s setting an upper and lower limit for the height of our section. You don’t need to use a clamp function if you don’t want, but it’s there if you need it.
If this helps or if you have any questions, let me know in the comments!
Related Code Snippets
The below Code Snippets are available to Code Curious members.
