object-fit on Image block not working

  • Resolved Carin

    (@carinlrazorsolutionscom)


    1 year, 7 months ago

    I’m trying to get the object-fit on a GenerateBlocks Image block to work, but not having much luck! I’ve tried all sorts and finally discovered you probably have to set an image size (which feels a bit like it defeats the object!) and this sort of works but of course on mobile it then displays images on a single “line” and they are massive as you’ve set a size. Then I saw someone suggest using inherit on the image width and height and tried that, but still no luck. Any help much appreciated! This was one of the main reason I wanted to use GenerateBlocks! ??

    • This topic was modified 1 year, 7 months ago by Carin.
    • This topic was modified 1 year, 7 months ago by Carin.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support ying

    (@yingscarlett)

    Hi @carinlrazorsolutionscom ,

    Which image are you referring to? And can you tell me what are you trying to achieve with the object-fit setting?

    Let me know ??

    Thread Starter Carin

    (@carinlrazorsolutionscom)

    Doh! ?? Sorry, I didn’t give enough info, you get blind to what you do and forget that someone else can’t guess what you’re trying to do!

    Basically on the first row of 3 containers there I want the images in container 2 and 3 to cover the entire height, to match up with the text container on the left. I gave them all temporary grey background colours so I could see what was going on. Hope that makes more sense!

    Carin

    Plugin Support David

    (@diggeddy)

    Hi there,

    object-fit cover works when at least one of the the Images dimensions has an explicit value.
    To force it to fit a container of unknown size requires the figure element to fill that space, and currently thats not possible in the editor. In the future the figure will become an editable container so that will be possible.

    Today:
    1. select the Container block that the Image sits inside of, and give it a CSS Class of: has-object-fit-cover
    2. add this CSS to your site:

    .has-object-fit-cover figure {
    width: 100%;
    height: 100%;
}

    With your current image block settings, that should fill the space.

    Thread Starter Carin

    (@carinlrazorsolutionscom)

    Awesome, you’re a legend, that works a treat, thanks so much for the quick solution!

    Plugin Support David

    (@diggeddy)

    You’re welcome

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘object-fit on Image block not working’ is closed to new replies.

Tags