Hi,
I’d like to change the height of an image to 100% using object-fit: cover to fill the remaining space in the container. Setting the height only seems to work with the other units, using percentages doesn’t do anything!?
Trying to use background images for now, which works, but there is a strange problem: Some images aren’t getting displayed.
I have 2 containers, the left has an image element inside, the right one only the container with background image: attachment 1.
Some of my images aren’t displayed: See attachment 2.
I see the background picture flashing for a split second when inserting it, but it doesn’t get displayed.
Whats going on?
One more strange example:
Background Images:
Attachment 3: Colors are off at full image size
Attachment 4: Colors are correct at medium image size.
Hi @Ursurpax,
to answer your first question first:
Assuming you have a root container with two containers inside and inside of each container an image element (see Screenshot, nevermind the code block - I just set the custom CSS there for testing):
Please add a class of “.fit-cover” to each image (you don’t have to set anything else on the images, maybe except for the image size (medium, large, …).
Then, navigate to Bricks » Settings » Custom Code » Custom CSS and add:
.fit-cover,
.fit-cover img,
.fit-cover .image-wrapper {
width: 100%;
height: 100%;
object-fit: cover;
}
It shows correct on frontend, but not on the canvas.
Probably it is much easier to use background-images set to background-size: cover, which leads to your second problem.
Can you provide a live link? Looking at the code is a lot easier than guessing out of screenshots.
Which Browser and Bricks version are you using?
Best regards,
timmse
Hi Stefan!
Thanx alot, with fit-cover all images work perfectly!
But the background image color shift remains:
Example page: NEWS – bp.dertherapeut.at
Nr. 1: Image and Background image: Strange color effect on background image.
Nr. 2: Same as Nr. 1, but background image is set to medium, colors displayed correctly.
Nr. 3: When using landscape format images, they do not stretch, so the background image (right one) is cut off. How do I get to to stretch to the full height of the background image?
I’m using Bricks 1.3.6 on latest Chrome on macOS 10.15.7
Hi,
1&2: I visited the site with different browsers on different systems (macOS, Windows 11) and was not able to see the color shift 
I have no idea what’s wrong there…
3: This is the default flexbox behavior. The “columns” will split into 50% each, the left column gets the height of the image, and because you’re using a background image at the right column, it uses the same height as the left column and covers the remaining space, because it is set to background-size: cover. If you want the background image on the right not to be cut off, you can set the background-size to contain. This way, the image shows at 100% height, but won’t fill the remaining space to the sides.
Best regards,
timmse