html - Image Sizing to aspect Ratio within custom field

Question

I am using ACF to display a second featured image of my portfolio items in a WP Bakery "portfolio Grid"

When hovering over the company portfolio grid item, the logo is to appear in the 'top' row of the WPBakery custom grid - which it does. the sizing of the image is however not sizing correctly depending on whether it is a wider image, (landscape) or (portait) image.

I have used this CSS to try to resize the image to "fit" in the top row of the block on hover, as well as be 'vertically centered'.

div#field_600a6941959f7 {
    text-align: center;
    height: auto;
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

The first block "Rad AI" - is landscaped shaped, and therefore is now too small and too close to the top of the block - whereas the second block "Ancilia" is sized and proportioned correctly as it is "portrait" shaped.

View Website here Please go to the "Companies" Slide

Required

1. For the logo image to resize on hover to be correctly proportioned and
2. for the logo image to be vertically aligned in the block above the post excerpt.

question from:https://stackoverflow.com/questions/65849634/image-sizing-to-aspect-ratio-within-custom-field

Answer 1

Waitting for answers