1

I am currently testing my websites on different types of screens and while my image cropping works perfectly on a non-retina screen, I am running into some cropping issues on retina screens.

I have two image sizes that are cropped to different dimensions. To achieve this, I have this in my functions.php file:

add_image_size('sidebar-thumbnail', 70, 70, true);
add_image_size('small-thumbnail', 300, 180, true);

On non-retina screens, the images crop perfectly for both sizes. However, on retina screens, the images look squished on one of the two sizes, for example:

retina small thumbnail retina sidebar thumbnail

the sidebar-thumbnail is squished horizontally to fit in the square. In other examples, the sidebar-thumbnail looks fine but the small-thumbnail is stretched horizontally to fit the size. This is confusing to me because on standard-resolution screens both thumbnails are cropped perfectly, even when the same two images are displaying wrong on retina. Does anyone know what could be causing this?

Improve this question
1
  • Can you please confirm the screenshot of those images using a default WP Theme? Or, alternatively being in /wp-content/uploads/YYYY/MM/ with file names filename-300x180.ext and filename-70x70.ext - and opening both the images using an image viewer like Picassa or ACDSee. We need this to ensure that your theme is not squeezing those images while showing on front-end.
    – Mayeenul Islam
    Commented Aug 18, 2015 at 6:20

1 Answer 1

Reset to default
1

I found that what was causing this issue was a plugin I had enabled that was supposed to handle retina images called WP Retina 2X. I disabled the plugin and it immediately fixed the issue.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.