Cover Block – “contain” instead of “cover” on mobile

  • Resolved jfans8yg19

    (@jfans8yg19)


    1 year, 4 months ago

    Hello,

    I would like the image in the Cover block to keep its aspect ratio regardless of screen size, instead of cutting off the way it does right now on mobile.

    Here are two images depicting what it looks like right now.

    I’ve read there is a value in CSS called contain and it seems to do what I want it to. However I have no clue how to incorporate this properly.

    Thanks a lot,
    have a wonderful rest of your day ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello, this appears to be the Cover block behaving as intended.

    Are you able to use a regular Image block instead? That could retain its aspect ratio. If you need to retain the overlaid text, perhaps you could create an image with the text incorporated.

    Writing custom code and styles to use contain may work, but if the image retains its wide aspect ratio as the screen narrows without increasing its height, it may be hard to have the text overlay properly.

    Thread Starter jfans8yg19

    (@jfans8yg19)

    Thank you for the response Artemio!

    Incorporating the text in the actual image would unfortunately not be preferable for a multitude of reasons.

    Yes, custom code/styles (hoping CSS will do) is what I’m after! ?? The image is tall enough for the text to overlay decently I believe, this is also not the only image I would like this to be applied to.

    @jfans8yg19 Ok I’ve been able to take a closer look at this. Are you by chance using a block theme with full site editing? If so, you could give this approach a shot:

    1. First, give the cover blocks you’d like use object-fit: contain a custom CSS class like cover-contain by clicking on each block in the editor, then going to Advanced under block settings:
    View post on imgur.com

    2. Then, add the following CSS to your theme using full site editing.

    .wp-block-cover.cover-contain .wp-block-cover__image-background {
   object-fit: contain;
}

    You would add that by going to Full Site Editor > Edit Styles > Styles (More) > Additional CSS:

    View post on imgur.com
    View post on imgur.com

    The caveat is that the cover will still retain its height, so additional space may be present on the top and bottom of the images at smaller resolutions.

    Beyond that, the best way I know how to get this right would be to create a child theme and create a custom template to have more granular control over the markup and display of the images, probably using display: flexbox.

    Alternatively, you could explore creating a custom block that would overlay an image with text and retain aspect ratio while resetting its height dimension whenever the window resizes.

    How does all of that sound? Perhaps that can give you some ideas or point you in the right direction ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover Block – “contain” instead of “cover” on mobile’ is closed to new replies.