Aspect ratio for featured images on main page is off

I don’t see any squeezing or stretching, but Cubic does add black bars to the bottom or top of any images that are much wider than they are tall. If you upload images that are closer to a square aspect ratio (such as 4:3) you shouldn’t see any black bars.

Let me know if this does the trick.

The recommended size for featured images in Cubic is 2000 wide by 1500 px.

Thanks for getting back to me. I guess I should have tried this in other browsers. IE 11 shows it, Chrome and Microsoft Edge do not.

Can you reproduce it with IE 11?

I’m not seeing any obvious squeezing or stretching in IE11 either, with Win10. Here’s a screenshot, does this look right to you?

If you’re seeing something different on your end, could you try temporarily turning off any browser extensions/add-ons/plugins and see if that makes a difference?

Another thing to check is the Cubic demo, do you see the same issue there?

https://cubicdemo.wordpress.com/

Your screen capture isn’t from IE11, that is the Microsoft Edge browser. On Windows 10 (which is what I am running), you can run IE, but you have to run it from Start (since it isn’t installed on the task bar by default). Can you try again in IE?

The demo looks fine, but aren’t your pictures perfectly sized for that?

Thanks for your help.

The demo looks fine, but aren’t your pictures perfectly sized for that?

No matter what size the images you upload are, there still shouldn’t be any stretching or squeezing.

Your screen capture isn’t from IE11, that is the Microsoft Edge browser. On Windows 10 (which is what I am running), you can run IE, but you have to run it from Start (since it isn’t installed on the task bar by default). Can you try again in IE?

Hmm – strange, that’s what I got when I installed the IE11 virtual machine from modern.ie. I will have a look around and see if I can find what you’re referring to!

While I wasn’t able to install IE11 alongside Edge, I did check your site on Windows 10/IE 11 in Browserstack and I can see the squeezing issues there on some of the images.

I’ll report them to our developers so they can have a look and we’ll keep you posted here.

Our developer has fixed this issue, and it’ll be included in the next update of Cubic.

If you’d like to fix the issue yourself in the meantime, it’s fairly simple. In Cubic’s style.css file, replace lines 274-275:

max-height: initial;
  min-height: initial;

With this:

max-height: none;
  min-height: 0;

Let me know if this does the trick.

Yes, thank you! Worked perfectly.

Excellent, glad to hear it. ??

Hi Kathryn, Can we revisit this topic? I just uploaded an image on the front page for this theme and it cropped out some of the picture. I know the recommended pixel size is 2000×1500, however when I resize the picture to that size, the picture is still cropped plus it loses image quality. Full disclosure, I’m really new to building websites and am having a hard time following the above chain. Can you please explain again how this can be addressed?

https://tashinamusf.com/

Thanks,
Sam

https://tashinamusf.com/