Hero image "zoomed" and cropped

  • Author
    Posts
  • #159609

    nelsony2013
    Member

    Hi Taras–

    My hero image is automatically resizing and cropping on WordPress.com, so I am losing the image perspective. I have done everything I can in CSS to show the full image (widening the container, removing the padding in the hero area). I have also created several different sizes of my hero image, and all of them are getting cropped and zoomed.

    1. What size picture do I need to create a hero area with the same perspective as the theme example?

    2. Can the hero image extend into the top header menus? (example: https://www.apricotconsulting.com.au/services) If so, how do I do that?

    The blog I need help with is ymnelson.com.

    #159610

    tarasdashkevych
    Theme Author

    Hi Y.M.

    “My hero image is automatically resizing and cropping on WordPress.com…”
    – The background image in the Hero section uses a cover functionality, meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image covers the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    It is hard to tell what the exact image size you should have in this section because the height of the Hero section is dynamic, and it depends on the amount of content you have in it.

    Also, the width of the Hero section is varying depending on the container width of your website and a screen resolution. All these aspects highly affect how a background image will be shown in the Hero section.

    The same thing applies to the page header section shown in single page views.

    You can keep an original aspect ratio of your featured image but it will cause styling issues:

    
    .page-header .th-featured-image {
      object-fit: contain;
      -o-object-fit: contain;
    }
    

    Also, the featured image can be sized to fill the section. If necessary, the featured image will be stretched or squished to fit:

    
    .page-header .th-featured-image {
      object-fit: fill;
      -o-object-fit: fill;
    }
    

    “Can the hero image extend into the top header menus?”
    – Unfortunately, the Fortune theme is not designed to have a layout as it is shown on this page but we have another theme which allows to create this layout. Here is a demo of the Appetite theme: https://appetitedemo.wordpress.com/

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #159635

    nelsony2013
    Member

    Got it. Thanks, Taras!

    #159663

    tarasdashkevych
    Theme Author

    You are very welcome!

The topic ‘Hero image "zoomed" and cropped’ is closed to new replies.