I’m confused. This is no doubt due to coming from Oxygen which I have to “unlearn”, but nonetheless it makes no sense.
I’ve a container DIV that is set to height: 20vh.
Inside is an SVG image, set to height: 100% and width: auto. I want the image to be the full height of the container, whatever size it is (currently 20vh).
When I inspect the markup, I see two DIVs inside the container DIV, a “.bricks-element” and a “.image-wrapper”.
Inside those is the IMG element. The IMG element has the 100% height that I applied, but because the two wrapper DIVs do NOT have a height of 100%, the image does not consume the full height of my container DIV.
As far as I remember, an image will only shrink but not grow if it is smaller than the container you want to fill with it. So if the height would be more than 100% of the original image this won´t work.
Maybe try to use it as a background image of your div (set it to “norepeat” and “contain”). Not sure if this solves your problem, but worth a try.
There is a control where you can set the image to stretch (located underneath custom alt tag on the image element. This would only stretch to the length or the height of the container whichever comes first so if there is still 10vh at the top but you have reached the width of the container it will stop.
I would suggest object cover: fit in this instance to make the image act as a background image and cover the container all the while you keep the SEO benefit of having an image on page too.
you can use the SVG element instead of the image element, which provides much more SVG features like stroke or fill color, which can’t be changed when the SVG is inserted in an img tag.
Add the container, set the height to whatever you like, probably align-items to stretch, add the SVG element inside, and set the height to 100% and the width to auto. It will adapt to the container height (or width if it’s landscape).
So if I switch the element type to SVG instead of image, I have the same problem. This time the SVG is wrapped in only a single DIV wrapper (class “bricks-element-svg”) inside my main container. But because the 100% height is applied to the SVG, not it’s wrapper DIV (“bricks-element-svg”), it still does not span the full height of the main container. Like with the image element, the problem is either the presence of these wrapper DIVs (why do they exist?), or a bug that is preventing the wrapper DIVs from receiving the 100% height style (if they have to exist for some reason unknown to me).
OK, I switched back to 1.3.6, but it still doesn’t work without adding custom css to have the height explicitly set at the same height as the container it’s in:
