I’m having the same problem. I’ve resized the image in 6 different ways but they all become over-zoomed and cropped. The CSS doesn’t offer an obvious conclusion.
So, it seems that the problem is that the Twenty Seventeen theme doesn’t fail gracefully when the browser doesn’t support srcset.
srcset is a way of allowing the browser to request one of a variety of available images, according to the local environment – so it’s great for responsive designs (which is what Twenty Seventeen is).
Where scrset is not supported, the browser fails back to src= – and that’s where things go wrong here. The default image is forced to render at the full 2000×1200 pixels – hence the apparent overzoom and cropping.
I suggest that the correct behaviour should be to render the default image at 100% width (or 100vh), and auto (correct aspect ratio) height – centered vertically in the containing div, with hidden overflow.
srcset is not supported by Safari on the desktop until version 9, and that was released at the end of 2015. I updated to Safari version 10, and didn’t then observe the problem.
I’ve looked at trying to correct the problem, and have tried a number of things like changing the attributes written into the html, and changing the css targeting of that element. However, I can’t find the right solution – I expect because there’s some other parent css that’s breaking my attempts.
I appreciate that Safari has supported srcset for about 18 months – but there’re a number of good reasons why folks might not yet have updated. Plus, I can see that there’re plenty of other browsers where it’s not supported.
Is it reasonable to not fail gracefully for clients that don’t support srcset? In my opinion, I’d say not – so I think that this is something that would be great to get fixed.
Simon
-
This reply was modified 7 years, 1 month ago by simplesimonh.
this has been so frustration, as I too have tried resizing it so many times. Can you please explain how to do what you suggested:
“I suggest that the correct behaviour should be to render the default image at 100% width (or 100vh), and auto (correct aspect ratio) height – centered vertically in the containing div, with hidden overflow.”
Thank you!
Lisa
Hi Lisa,
My conclusion was that the theme itself needs fixing. I tried to implement the changes I think are required, but I couldn’t make it work. I think this probably needs looking at by the original theme developers.
Just to clarify for you, the problem I described (which may or may-not be the same as your problem) is related to browsers that don’t support the relatively new srcset feature. When a browser doesn’t support srcset, it’s good practice for the site to offer a fallback to src=. The problem here seems to be that the theme doesn’t do that properly.
I found that by updating the browser, the problem was no longer observed. The decision then is whether or not you think you need to support older browsers.
Simon
Thank you for the info. Seems like a problem that needs some type of resolution.