How To Implement Object-cover:fit In Pagebuilder 5
H
I have a page (https://test.deijsmannetjes.nl/ijstaarten) constructed of a number of similar sections. Take as example the second section (with heading "Een ijskar op locatie").
I want the image on the left to always use 100% of the height of the section. And when the dimensions of the screen change, the aspect ratio of the image should not change; if nexessary the image will be clipped. I think it is what the css directive object-cover:fit does.
How can I do this in Pagebuilder?
Paul Frankowski
Accepted AnswerHi,
On the 2nd row you have Image addon.
Maybe better would be to set image as background on the left column, then you have more design options to choose from.
OR
Use Image content addon
OR
yes, you can use Custom CSS for every object, just use unqiue Section/Row ID Name and class name
#RowName .sppb-addon-single-image-container
#RowName .sppb-addon-single-image-container img {object-fit: cover;}If that may help you. Yes, I asked our developer to add "object-fit" as new option in upcoming updates.