Opened 7 years ago
Last modified 4 years ago
#39253 new defect (bug)
Twenty Seventeen: Head Image Quality Issue
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 4.8 |
Component: | Bundled Theme | Keywords: | needs-patch needs-testing 2nd-opinion |
Focuses: | css | Cc: |
Description
A question about the Twenty Seventeen Theme's Head Image, it is really cool but the image is not in the best position on iOS Safari and image quality drops too...
But if I turn the phone around...
Looking much better, refresh it and rotate again?
Wow the shiny picture comes back...
P.S. Is it possible to set the align of Head Image on mobile? So I can choose which part of the picture I mostly wanna show.
Change History (6)
#2
@
7 years ago
Thanks for taking a look @laurelfulford, and providing more details! Wondering if @joemcgill has thoughts on the best approach to this one?
#3
@
7 years ago
This is a tricky one. If there's a way to calculate the actual image width that will be applied using object: cover
at different break points, then we could update the sizes
attribute accordingly. It's worth noting that calc()
works inside sizes
attributes. If that doesn't work, then a possible approach could be to estimate when the image will be larger than 100% of the screen size and do something like 150vw
.
#4
@
7 years ago
- Summary changed from Head Image Quality Issue to Twenty Seventeen: Head Image Quality Issue
Good catch, @richardevs!
It looks like the image quality issue is happening because the header image file itself is set to be 100% of the screen width on page load:
... and then it's being scaled up further with
object-fit: cover
in the style.css. It's much more noticeable on vertical screens, because the image is getting scaled up a lot more than on a horizontal screen to fit the space.I'm not sure if the best fix is to simply increase the image size for smaller screens, or perhaps there's some really specific case we can check for before assigning a size?