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
- For the logo image to resize on hover to be correctly proportioned and
- 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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…