[ckruger]

Hi, for some reason the images I upload to my blog posts are automatically blown up to be 100% width of the page I think, causing them to be massive and blurry. Is there a way to get my images to retain the dimensions of the original files?

Example can be seen here: http://marketingcompass.com/titanic-survival-dataset/

Thanks

[serkan]

Hi ckruger,
You can upload the bigger size photo. Your images full size and dimensions are smaller than the full size that is why it is blurry. Upload the medium size or use align options.
Thanks

[ckruger]

Hi serkan,
Thanks for the response. Can you please clarify your instructions?

I uploaded the images with different resolutions/messed with the align options, and that did help with the blurriness, but it seems the theme automatically blows the images up to 100% page width.

How can I go about locking the image to the original image dimensions so it doesn’t resize for different screens?

[serkan]

When you add a media, please check the display settings. Align center, size full.

[ckruger]

I reuploaded following your instructions exactly with no luck. The images still expand beyond the native resolution.

In the post editor the images look right, which leads me to believe it may be something related to the CSS code. Any thoughts?

[serkan]

Hi ckruger,
When I inspect your related page, it says to me that you are not uploading full size image, you are uploading medium size. Well I do believe in you so I will check myself what is going on. Could you send me your wp admin details via our contact form and add this topic url, then I will check it.
http://www.pixelwars.org/contact/
Thanks

[serkan]

Hi ckruger,
Just fixed your issue =) Cheers

[ckruger]

That did the trick! Thanks a bunch.

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.

[vicmaster]

I have the same issue. How did you fix it? Can I apply the same fix? Please share

[serkan]

Hi,
I did the same solution which I gave above. Make sure you do the steps correctly.
Also, could you provide me your related url, please ?
Thanks

[terrysimp]

I have the same issue, the above steps don’t work.
A 1272×445 image is being scaled to 500×175 even though specifically set to “Full”
http://www.terrysimp.com/conforming-101/

[terrysimp]

Image within post’s settings: http://imgur.com/ZysONrG

[serkan]

Hi terrysimp,
I just checked your related url and it seems like a third party plugin is conflicting with theme. Please deactivate all your plugin and try it again.
Thanks

[terrysimp]

Hey Serkan.

I’ve disabled all of my plugins, image quailty seems to have improved however all the files are still stretched to 100% width of the page, any clue how to resolve that?

Thanks

[terrysimp]

Finally managed to resolve the stretching by changing the formatting from the default “paragraph” to “pre-formatted”
Thanks for the help regardless.

[terrysimp]

Is there no way make <p>paragraph</p> formatting not stretch the image width to 100%? Having to switch between the paragraph and preformatted really breaks the alignment of the post.

[terrysimp]

For anyone that runs into this problem, I found the solution here:
http://www.pixelwars.org/forums/topic/single-post-picture-so-big/
By adding the below to Appearance > Customize > Custom CSS

@media screen and (min-width: 992px) { .post .entry-content > p img:not(.alignleft):not(.alignright) { width: 540px; } }
@media screen and (min-width: 768px) { .post .entry-content > p img:not(.alignleft):not(.alignright) { width: 540px; } }
@media screen and (min-width: 992px) { .post .entry-content > p img:not(.alignleft):not(.alignright), .post .entry-content .gallery { width: auto; max-width: 100%; margin: auto; } }
@media screen and (min-width: 768px) { .post .entry-content > p img:not(.alignleft):not(.alignright), .post .entry-content .gallery { width: auto; max-width: 100%; margin: auto; } }
@media screen and (min-width: 1200px) { .blog-single .alignleft, .blog-single .wp-caption.alignleft { max-width: 50%; margin-left: 0; margin-right: 2em; } }
@media screen and (min-width: 1200px) { .blog-single .alignright, .blog-single .wp-caption.alignright { max-width: 50%; margin-right: 0; margin-left: 2em; } }

[serkan]

Thanks for the feedback.