Topic: GenerateBlocks – responsive image resize based on container size

Oliver
May 15, 2024 at 4:42 am

Hello Support-Team,

I’ve tested it on a fresh WordPress 6.5.3 installation.
These are the changes I did:
Theme installed: GeneratePress 3.4.0
Modules activated: Blog and Spacing

Plugins installed: GenerateBlocks 1.9.1, GenerateBlocks Pro 1.7.0, GP Premium 2.4.0 and Yoast Duplicate Post.

GenerateBlocks Settings -> CSS PRINT METHOD -> Inline Embedding

Appearance Customize – Use infinite scroll

I would like to use a container to responsive resize the image inside it. For images in square (1.) or landscape (2.) it works, but how to do it correctly for images in portrait (4.)?
I don’t want to set the size for the image manually each time and even if I do, the size of the container in the middle is not 50% anymore. (3.)

responsive-image-resize
David
May 15, 2024 at 5:03 am
Hi there,

you would need to force it with sone CSS:
```
.gb-container .gb-block-image {
    height: 100%;
    box-sizing: border-box;
}
.gb-container .gb-block-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
```
Please note, that using CSS to resize images may effect the browser ability to choose an appropriate srcset image, resulting in the largest srcset image being loaded regardless
Oliver
May 15, 2024 at 5:36 am

Hello David,

thank you for your response. Are you sure object-fit is cover and not contain?

cover

contain

Oliver
David
May 15, 2024 at 5:40 am

That depends on your expectations, more info here:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

I assumed you wanted the image to fill the parent Container Block in both its Width and Height, and for that cover will work, but will crop the image if necessary.
Oliver
May 15, 2024 at 5:59 am

Thank you, David.
David
May 15, 2024 at 6:00 am

You’re welcome