div.post-thumbnail img sizing
-
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="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"2019 CORRE, Inc.","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" 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.