Balbooa Help Center: image too big custom code (1/1)

3 weeks 6 days ago #1

maffeaffe
Posts: 1894

Hi, I have this custom css code to show the full image i a gallery gridbox:
.ba-image {
width: 100%;
Height: 100%;
margin: 0 auto; /* horizontale centrering */
display: flex;
align-items: center;
justify-content: center;
}

.ba-image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
}

It works, except for 1 image, the image in the second to last row next to the valentino logo, and I don't understand why.

3 weeks 6 days ago #2

Vyacheslav Posts: 27059	Hello, Thank you for contacting us Send us a link to page with problem. Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

3 weeks 6 days ago #3

maffeaffe Posts: 1894	Hi, here is the link: ksvbwo-d-o-t-nl.alvast-online.nl/sponsoring/onze-sponsors
	The administrator has disabled public write access.

3 weeks 6 days ago #4

Vyacheslav Posts: 27059	You need to add !important; .ba-image img { width: 100% !important; height: 100%!important; object-fit: contain; padding: 10px; } Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

3 weeks 6 days ago #5

maffeaffe Posts: 1894	Thank you, but it makes no difference.
	The administrator has disabled public write access.

3 weeks 6 days ago #6

Vyacheslav Posts: 27059	At the moment, all the code that you added is working correctly, the image will occupy all 100% of the parent. the picture is not distorted thanks to object-fit: contain; It seems we do not understand what result you need to get Describe in more detail (show on the screen) Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

3 weeks 5 days ago #7

maffeaffe Posts: 1894	Hi, thank you, this link: ksvbwo-d-o-t-nl.alvast-online.nl/sponsoring/onze-sponsors see this image (attachment) Attachments: ...-10.jpg (549KB)
	The administrator has disabled public write access.

3 weeks 5 days ago #8

Vyacheslav Posts: 27059	We still don't understand what the problem is. The image is cut off ksvbwo-d-o-t-nl.alvast-online.nl/images/...1/valkenaar-def.webp Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

3 weeks 5 days ago #9

maffeaffe Posts: 1894	Hi, it's not in the gallery, see attachment Attachments: ...ery.jpg (263KB)
	The administrator has disabled public write access.

3 weeks 5 days ago #10

Vyacheslav Posts: 27059	You need to make it square in photo editor (photoshop) Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

3 weeks 5 days ago #11

maffeaffe Posts: 1894	But the other logo's are also not square and they show perfectly. See for example: ksvbwo-d-o-t-nl.alvast-online.nl/images/...1/tropic-parket.webp
	The administrator has disabled public write access.

3 weeks 5 days ago #12

Vyacheslav Posts: 27059	You need to make them square fit into a square. or use masonry layout, it keeps proportions Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.