SOLVED IN 1.4: Height not working on image, object fit/fill/etc

Bugs
1

Object Fit on images doesn’t work as it should.

The idea with object fit on an image is to make it act like a background image, so we still get the advantage of lazy loading and SEO.

Because the image widget is wrapped into two divs, the height attribute is not working.

The issue
Widget markup

<div class="bricks-element bricks-element-image">
  <div class="image-wrapper">
    <img  >
  </div>
</div>

So when you set the height in the builder, it only applies to the bricks-element, but not the wrapper and the image.

CSS for fix
On image widget element, go to css.

root, 
root * {
  height: 100%;
}

Here’s my video, and with a two line css fx.

Bricks Version: 1.3.7
VIDEO: Bricks - Height not working...
I did also get some weird image widget issue, they a caught in the screen recording

2

Hi Kevin,
Thanks for your report! Since we removed all unnecessary wrappers in Bricks 1.4 the problem should have fixed itself :wink:

Please check it again with Bricks 1.4 beta and let me know if the problem is fixed.

Best regards,
timmse

1 Like