Large Picture not displaying correctly?

Resolved yellow15
(@yellow15)

11 years, 5 months ago

I noticed some of the image are not displayed correctly in my blog post, They look squashed.

It seems to happen mostly on large photos in portrait orientation.

If i reduce the image size, then it works better.

Is there a fix as I do want to post high resolution image e.g. 800 x 2400 pixels that my readers can click on and see in full resolution but still want it to display correctly (i.e. in correct aspect ratio) on my blog post.

this is the photo I upload to wordpress:
http://www.photobyrichard.com/images/original-photo.jpg

and this is what it looks like after I add to my blog post:
http://www.photobyrichard.com/images/screenshot-wp-issue.png

Viewing 7 replies - 1 through 7 (of 7 total)

Thread Starter yellow15
(@yellow15)

11 years, 5 months ago

Hello anyone? 🙁

BackpackersUnion
(@backpackersunion)

11 years, 5 months ago

Do you have a link to the page with the image?

Thread Starter yellow15
(@yellow15)

11 years, 5 months ago

yes sure,
this is the page:
http://www.nikonjin.com/2014/11/nikon-d750-review/

this is a password protected page, pw is
lacklands

The image is half way down the page:
(original image)
http://www.nikonjin.com/wp-content/uploads/2014/11/nikon-d750-review-09.jpg

Dan14
(@dan14)

11 years, 5 months ago

I ma not sure what the website is about but if the images are big files it will affect the page load speed of site.

BackpackersUnion
(@backpackersunion)

11 years, 5 months ago

So there’s a style that is forcing full size images to a max-height of 572px;. If you just want the correct aspect ratio, you can add something like this in a CSS plugin or your child themes style.css file;

img.size-full {
max-height: 1200px;
}

The number can be as heigh as you want, but no lower than 901px (the images correct aspect ratio at its current width is 300×901).

Hope this helps 🙂
BackpackersUnion
(@backpackersunion)

11 years, 5 months ago
Also, if you did want the image to be full resolution in your blog, same steps but add;
```
img.aligncenter.size-full.wp-image-1319 {
   height: 2403px;
   width: 800px;
}

img.size-full {
max-height: 2403px;
}
```
Thread Starter yellow15
(@yellow15)

11 years, 5 months ago

Awesome thanks BackpackersUnion! That fixed my problem 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Large Picture not displaying correctly?’ is closed to new replies.