Row Width Image And Text-box, Height Of Image
Jim
hi, i have a row width image element on the left and text element on the right.
when the text element gets higher than the image - i want that the image would fill the whole left side. css: object fit cover. that worked some times but with j5 and newest sppb pro i cant get the image as high as the text element.
tried width, height...100% but didnt work.
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and sorry for your issue. Could you please give me your site URL and also screenshot of your issue?
-Regards.
Jim
Accepted Answeryou can see both links? so you have both css for the images. no need for screenshot. in the first page i overwrite the divs around the image for 100% height. so if the text on the right side is higher than the image, the image would cover...that gap. in the second link, i cant overwrite those classes to get the image 100% height.
Pavel
Accepted Answercss: object fit cover
Hi.
This cannot but work. You just didn't find the right approach. I doubt that JoomShaper support will help you, as this is beyond the support policy.
If you provide a public link, I could help you with this.
... Or maybe the best option is to use a background image in a column instead of Image addon. Then you do not need CSS
Jim
Accepted Answeryes bg would be a way to do it, but without alt tag and seo... it worked in previous version of sppb. but now the divs changed and the row dont want to be 100% height. you can check this one: https://www.spath-schuetzen.de/ its the old version of sppb and height 100% for the image of image-textbox row.
Pavel
Accepted Answeryou can check this one: https://www.spath-schuetzen.de/ its the old version of sppb and height 100% for the image of image-textbox row.
You have an overly complex design (row inside row) and not universal CSS.
Add a section. The row inside is not needed.
Add your own classes to the settings of the column containing the image and to the Image addon settings.
Column settings:
Image Addon settings:
CSS:
.image-col :is(.addon-root-image, .clearfix, .cover-image, .sppb-addon-content, .sppb-addon-single-image-container) {
height: 100%;
}
.cover-image .sppb-addon-single-image-container {
display: flex;
}
.cover-image .sppb-img-responsive {
object-fit: cover;
}Result
_
After that, you just need to add these classes in other blocks where you need it.