[Support request] Header Post Image

Hi there,

Thats a tricky one, as the original images aspect ratio doesn’t match the Containers ratio. And if we make the image smaller you will see ‘negative space’ around the image.

To show more of the image you actually need to increase the height of the hero container.
Try editing the Global Post Header in Appearance > Elements, select the Container Block and increase the top and bottom padding.

Hi DJ,

Unfortunately, that’s not possible.

It’s either you set the image to object-fit: contain; which will try to fit the whole image’s width on its container but will cause negative space.

Or you set the image to object-fit: cover; which will force the image to fill the container’s space but will cause image cropping.

Or you don’t set a object-fit property and force img sizing with width: 100%; and height: 100%; which will fill the container’s space but will cause the image to be stretched, meaning breaks the image’s aspect ratio just to fill the container’s space.

Here’s an analogy for it.

Imagine having a 6″ width x 4″ height photo and a 6″ x 6″ picture frame.

There are 3 ways you can fit the photo inside the picture frame.

You either, place the photo as is but you’ll see that the photo is not a perfect fit because the photo’s height is 4″ and the frame’s height is 6″, you’ll see an extra 2″ of extra space the photo didn’t occupy. This is basically object-fit: contain; and the 2″ of extra space is the negative space.

Or you can re-print the photo to 8″ width x 6″ height so there’s no extra space in height. But the issue is you’ll have to cut the photo’s width by 2″ so it fits the picture frame. That’s basically what object-fit: cover; does. It crops to fit things in.

Or you can re-print the photo 6″ x 6″ squished. This will fit the photo within the picture frame without cutting it, but the picture looks ugly because it’s squished. This is what having no object-fit property + width: 100%; and height: 100%; will do.

It’s something you do with custom CSS.

Ideally, you’d want to add a class on the image element or its container and then do something like this.

Example #1: If the class is added to the container of the image

.your-class-here img {
width: 100%;
height: auto;
object-fit: cover;
}

Example #1: If the class is added directly to the image element. (<img> tag)

.your-class-here {
width: 100%;
height: auto;
object-fit: cover;
}

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/