CSS styles for centred image

Could anyone help me with some CSS that will make the featured images here... http://www.markmeynell.net.php56-26.ord1-1.websitetestlink.com/blog/ – show the centre part of the image? I've tried various things to get the background-position to be 'center centre' but nothing seems to work!

    Ken Kimbrell

    Hello Jon-

    The trick here, would be to make sure that your images for the thumbnail are set to a responsive width and the container is fixed with a background position of center.

    You will need to apply the custom CSS to your child-theme's style.css, or you can use the built-in wordpress Additional CSS option in the customizer, by going to your wordrpess dashboard and find Appearance > Customize > Additional CSS when on the front-end customizer.

    You can also use this free plugin called Simple CSS:
    https://wordpress.org/plugins/simple-custom-css/

    The ultimate goal would be to apply the CSS in an area that if you were to update your theme it would not get overwritten. See the code below:

    .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    }

    .thumbnail {
    width: 320px !important;
    height: 200px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    }

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support

    Ken Kimbrell

    Hello Jon-

    This is because you are putting portrait images in a landscape container. If you crop your images to a landscape dimension. You will not have any issues with images being stretched. You can notice that some of your featured images are being displayed normally on your blog page, and some are being stretched.

    The featured images being stretched are from your images being uploaded as a portrait scale and your theme rendering a full scale image and then resizing it with CSS in a landscape container. Your best bet is to resize all of your featured images according to your largest set thumbnail size for how your theme renders images when it comes to your single post featured image size.

    Try doing a performance scan and seeing how you score on server side scaling.

    I noticed you have several posts, so I certainly recommend using our WP Smush Plugin if you are not utilizing it already:

    https://premium.wpmudev.org/project/wp-smush-pro/

    It will help optimize your images and speed up overall performance for you.

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support

    Jon

    Thanks, still not quite there but I'll keep looking.

    At the moment ALL the images are stretching/squashing unless they happen to be exactly 320x200px (or proportionally the same). This is an old blog which I'm reworking for a client and so I can't afford to manually go through nearly a thousand images and recrop them all to this size (unless I'm missing some tool somewhere). What I was hoping was to have a container that is 320x200px but the background image to that container sites centred regardless of how big it is (or whether it's landscape or portrait). My theme is doing that with the header images (on blog posts) and on the home page (with the Elementor posts layout) but I've not managed to reverse engineer how these work.

    I'll keep trying.

    Ken Kimbrell

    Hello Jon-

    I believe what you are referring to, would be when an image is set as a background of an element, then you can use CSS to make it "cover" the background of the container. See example below:

    .container {
        width: 150px;
        height: 100px;
        background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    Problem with this is your theme is currently rendering the featured image as an img element, when in order to make this work. You would have to go into the post loop and use PHP to make the background of containing element pull the featured image as a background url. I have made a custom shortcode function that you can test by adding this shortcode [custom_post]. You would want to apply this function in your child-theme's functions.php file:

    /** Custom post with background images
    ===================================================== **/
    function wpmu_custom_post_list(){
    
        $args = array('post_type' => 'post', 'post_per_page' => 10);
        $loop = new WP_Query($args);
    
        while($loop->have_posts() ) : $loop->the_post();
    
        $image = wp_get_attachment_url( get_post_thumbnail_id( $post->ID) );
        $content = get_the_excerpt();
        $permalink = get_the_permalink();
    
        echo "<a href='{$permalink}'>";
        the_title('<h4 style="margin-top:10px;">','</h4>');
        echo "</a>";
        echo "<a href='{$permalink}'>";
        echo "<div class='img_container' style='background-size:cover;background-position:50% 50%;width:400px;height:250px;background-image:url({$image});'></div>";
        echo "</a>";
        echo "<div class='post_content'>{$content}</div>";
        endwhile;
    
    }
    //Use [custom_post] as the shortcode to call the function
    add_shortcode('custom_post', 'wpmu_custom_post_list');

    Of course, you could use CSS to style some of the div elements. The only inline style that needs to be on there is background-image url({$image}); The rest you could use the .img_container class to style in your child-theme's style.css file.

    The idea is to set the background image to cover the background of a fixed width, regardless of the width. Then make sure the background position is set to 50% 50% and that will keep it center. Then make sure the background does not repeat. Most themes use this method as it delivers a more crisp look to the featured images. Older themes just use the the_post_thumbnail() function and call it a day. This function is great but it pulls an img element.

    It would be possible to take the structure of this function and modify the post_loop file in how your theme is currently looping through its post.

    Let me know how I can help!

    Take Care,

    Ken - WPMU DEV Support