Setting width and height of object in html card

Using Ghost
1

Hi, I have a html card that creates an image from code held in a file in the assets folder of my theme.

How do I control the height of the image?

This works:

<figure class="kg-image-card kg-width-full">

<div class="bk-root" id="257c3f7c-c659-48ab-b796-4adb65b17965" data-root-id="4578" width = "100%"  style="height:100vh"></div>
    
</figure>

But rather than relative to the screen size, I really want to set the height proportionately to the width. I tried “height=60%” and some other methods, but haven’t been able to make it work.

Thanks

2

You could try using the aspect-ratio css property, which allows you to specify an aspect ratio for an image.

3

That does exactly what I want. Thanks v much for the suggestion.

1 Like