Slider on Retina vs non-Retina, images are cropping

People viewing it on non-retina see the slider with cropped imagery

On the retina, the slider images take up almost the full height of the screen

Which screen sizes are you referring to on the retina & non-retina screens? Did you check if this was a browser issue?

And how is it cropping? Chopping the sides, or from the bottom? (the latter is normal for Customizr, to maintain aspect ratio on wide screens)

I’m actually having the same problem as Mark, but only with new images…thankfully my main image is fine, but whenever I try to add new slider images it shaves pieces off at the top as well as the bottom of the photos to create a ‘slice’ in the middle. You can see the gap.

I’m using an Hp

All – I included a link. If you are not on a retina display, you will see the cropping and it doesn’t look right. If you are seeing otherwise… I’d love a screenshot and some details about your system.

To clarify, this issue is regarding changes you’ve made to the Customizr theme?

@markmceachran – I’m viewing on a large, non-retina Mac monitor and I don’t see any image cropping at any viewport size (first time I’ve been able to say that about any full-width slider hitherto). I downloaded your images to be sure that none of the data is being cropped.

What I do see is scaling. With a responsive theme, the slider images obviously have to be scaled down in size so that they can be viewed on different devices. At their default size – 2000 x 500 – your images butt tightly up to the grey rule at the top only when the viewport is 2000px wide. As you reduce the viewport, the images become shallower – for example, when the viewport is 1000px wide, your images will be scaled to 1000 x 250.

In an ideal world (imho), the scaling would be done from the bottom of the image so that the top always stayed tight to the grey rule, while the rest of the page content moves up into the scaling-generated white space. But the algorithm is scaling from the middle with the result that white space is generated above and below the slider. Thus your slider effectively moves down the page, away from the grey rule, as it scales down below 2000px width. But the images remain complete and uncropped.

Here’s a screenshot my friend sent me. He’s running chrome on a non-retina display.

Now, I’ve gone in and replaced the image with something that centers our faces so that it looks a little better now. So the live version of this looks better now. But you can see in the screenshot that the image does not butt up against the top margin at all.

Since some of you aren’t seeing this problem, I’m beginning to think that it’s a bug.

That screenshot is what is happening on mine. I’m running Chrome on a non-retina…that screenshot is the identical view I have when looking at your site Mark.

I agree that it’s a random bug, probably having to do with the code regarding rendering images optimally for retina/non-retina.

Definitely no such cropping on my two non-retina Macs at any viewport. 100% of the image is visible at every viewport size.

As for butting up against the top margin, that only happens at native scaling, ie when viewed on a 2000px wide viewport. Any narrower and the image starts pulling away from the grey rule.

Does anyone know the protocol for getting this issue in front of the developer?

The developer – @nikeo – reads and posts here most days.

At no point on my non-retina screen do I see what your friend sent you. The faces are always visible, no matter what window-size. It looks to me that Customizr is working as normal: sizing the image to keep its aspect ratio (i.e. not stretch or squash) with a max height of 500px.