Pictures are being Distorted

Forgot to mention – LOVE this theme, its flexible and well put together.

Hi Chris,

Thanks for the kind words ??

Do you have a larger version of that image? What happens is that the image is stretched until it’s wide enough to fill the space with any additional height being cropped at the top and bottom.

Since visitors will view your site at all sorts of screen widths, there is no perfect image size, but images that are about 1,000px wide will serve the most visitors best. If you have a 1,000px wide version of the image in that post you can use, it will be really crisp for most visitors.

Alright so i tried that but i’d argue it looks worse now. The image i just uploaded is 1000px wide and it truncates the thumbnail and the post image.

Any other ideas?

Thanks for the prompt response.

Chris

Chris,

Okay, I see. This stuff is hard to explain ??

The images are going to look great if they have a width/height ratio of about 2:1 as well. With the white space added to that image to make it 1000px, the ratio became distorted so it is now about 5×1 causing the image to get stretched in order to fill the height of the space.

If you check out a post on the Tracks demo, the image used is quite large allowing it to fill the space nicely.

So the solution is to use larger images, or I could give the CSS to have the featured images contained in the space instead of filling the available space (example).

Can you provide that CSS so i can see what it looks like? i’ll also take a stab at adjusting picture resolution again.

Thanks,
Chris

Sure, the following CSS will create the same effect as shown in the example link above:

.entry .featured-image {
  background-size: contain;
  background-repeat: no-repeat;
}

You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.