How To Get A Picture Fit Into A Fixed Box, Like Object-fit:cover
Ernst
Hello, I am stuckeling with the following case: How to present 2 pictures next to each other in a fixed frame of like width 100%, height 400px. and the 2 pictures have to be max size of the box, but not streched, but cropped when nessesarly. I did it in the old days with the following code:
<!DOCTYPE html>
<html>
<body>
<div style="width:100%;height:400px;outline-style: dotted;">
<img src="/images/picture01.jpg" alt="Pic01" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="/images/picture02.jpg" alt="Pic02" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>Where picture01.jpg is 800x600 and picture02.jpg is 300x700 (example)
I rebuild it in sp pagebuilder: made a section: change nothing in the setting there put 2 colmn in the section: width = 50%, changed height and max-heigt to 400, but the picture does not keep that boundery put picture01.jpg (800x600) in column1 and set height (laptop) to 400. Now the picture stays inside the 400px height but gets scaled down and so a blanc space to the right. put picture02.jpg (300x700) in column2 and set height (laptop) to 400. Now the picture stays inside the 400px height but gets scaled down and so a blanc space to the bottom.
I tryed from a sample template the custom css code:
@media (min-width:768px) {
#addonWrapper {
width: 150%;
object-fit: cover;
}
}But what i try to fiddle with it it doesn't change a bit.
I think it has to been done in the custom css field of the picture, but to be truth a have no idea what i am doing in the custom CSS field.
So is there a document(s) with explanations how to use custom CSS inside SP pagebuilder Pro and/or samples explained so i can read and get the grip behide how it works.
Best regards, Ernst.
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out.
Would you please give me your site URL to check? Which addon did you use there? Image addon?
Best Regards
Ernst
Accepted AnswerHello,
Thanks for helping me out. I have put login info in the hidden content part.
The goal is following: I have a lot of pictures which are different sizes in heigth and width. To prevent from manual cutting them in the desired size i want to do that through css code. This because a picture can be used on different places in the website with different measuments. Also to make easy to use section block who i can reuse or add to a page and only have to add new pictures and that the format does not change.
Look at the my website: https://test.dutchfieldfarm.com/ and you have 2 menu options:
-
test-html-sample: this is how i would like that sp pagebuilder reacts.
-
test-html-to-sp-pagebuilder: this is how far i came, but not yet what i want.
yes i use the image addon inside a row inside a section, the standard one that is provided with sp pagebuilder pro 5 (i have)
best regards Ernst
Ernst
Accepted AnswerHello,
Sorry, made a mistake with the username, changed that. The info in the hidden content of the last post is now right.
best regards, Ernst
Pavel
Accepted AnswerHi.
But what i try to fiddle with it it doesn't change a bit.
You need to look at the HTML code through the Dev Tools of your browser to determine to which elements which code should be applied. There is no universal code.
- Add
cover-colclass to the column settinngs. - Add
cover-imageclass to the Image Addon settings. - Use following CSS:
.cover-col :is(.addon-root-image, .clearfix, .cover-image, .sppb-addon-content, .sppb-addon-single-image-container) {
height: 100%;
}
.cover-image .sppb-img-responsive {
width: 100%;
height: 100%;
object-fit: cover;
}Add this code to the custom.css file inside Helix Ultimate but not to the custom css field of the Image Addon, since it is impossible to turn to the column from this field.