• Our site is not live yet so I do not have a link I can post.

    We are working with both the News and Portfolio pages where all our posts/projects are shown. The Thumbnail image that appears for each post is sizing to 685 x 456.

    I modified the CSS to show the image in the size we want, but it’s making the images blurry:

    
    div.post-thumbnail img {
    		display: block;
    		margin: 0 auto;
    		width: 1170px;
    		height: 400px;	
    		object-fit: cover;
      	object-position: center;	
    }
    

    The original image was uploaded at 2000×1332. When I inspect the image, it says the rendered size is 1170 x 400, but the intrinsic size is 685 x 456 and the intrinsic aspect ratio is 685:456.

    In Functions.php I see this:

    add_theme_support( 'post-thumbnails' );
    
    	add_image_size( 'karuna-featured-image', 685, 9999 );
    

    but if I change 685 in our child theme to 1170 it doesn’t change anything; the images still appear with an intrinsic size of 685×456. I want to keep the aspect ratio and let object-fit and object-position do their jobs.

    Element tag for the image inside of post-thumbnail:

    <img width="685" height="456" src="https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?fit=685%2C456&ssl=1" class="attachment-karuna-featured-image size-karuna-featured-image wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="Pike River Trail Aerial" loading="eager" data-attachment-id="1272" data-permalink="https://correinc812317606.wpcomstaging.com/portfolio/pike-river-trail-shared-use-path/dji_0228-edit/" data-orig-file="https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?fit=5464%2C3640&ssl=1" data-orig-size="5464,3640" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;2019 CORRE, Inc.&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DJI_0228-Edit" data-image-description="<p>Pike River Trail Aerial</p>
    " data-medium-file="https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?fit=300%2C200&ssl=1" data-large-file="https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?fit=1024%2C682&ssl=1" srcset="https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?w=5464&ssl=1 5464w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=300%2C200&ssl=1 300w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=1024%2C682&ssl=1 1024w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=768%2C512&ssl=1 768w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=1536%2C1023&ssl=1 1536w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=2048%2C1364&ssl=1 2048w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=1200%2C799&ssl=1 1200w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=685%2C456&ssl=1 685w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=2000%2C1332&ssl=1 2000w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=342%2C228&ssl=1 342w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?resize=400%2C266&ssl=1 400w, https://i2.wp.com/correinc812317606.wpcomstaging.com/wp-content/uploads/2021/04/DJI_0228-Edit.jpg?w=3120&ssl=1 3120w" data-lazy-loaded="1" sizes="(max-width: 685px) 100vw, 685px">
    

    Any assistance getting these images to display with a higher intrinsic size (if that’s the problem) so they are not blurry is highly appreciated!

  • The topic ‘div.post-thumbnail img sizing’ is closed to new replies.