[wp-trac] [WordPress Trac] #39035: Twenty Seventeen: Header media (images and video) appear zoomed in

[WordPress Trac]

#39035: Twenty Seventeen: Header media (images and video) appear zoomed in
---------------------------+-----------------------------
 Reporter:  laurelfulford  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 This ticket came out of a discussion with @melchoyce:

 The video and header image don't scale as well as they could. They fit the
 available header space, which is intended, but the current styles also
 zoom them in noticeably. This results in a lot of unnecessary cropping,
 and makes it seem like the recommended image sizes are wrong.

 The header image is displayed with an `img` tag, and the video a `video`
 or `iframe`. Right now, these are positioned via CSS with the following:

 {{{
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe {
         position: fixed;
         height: auto;
         left: 50%;
         max-width: 1000%;
         min-height: 100%;
         min-width: 100%;
         min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
         width: auto;
         top: 50%;
         padding-bottom: 1px; /* Prevent header from extending beyond the
 footer */
         -ms-transform: translateX(-50%) translateY(-50%);
         -moz-transform: translateX(-50%) translateY(-50%);
         -webkit-transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
 }
 }}}

 Originally, when the theme only had a header image, it was set up as a
 background image and the scaling was done with `background-size: cover`
 and `background-position: center center`. This scaled the image to fit the
 available space, but without the extra zoom.

 I've included screenshots of the default image with original styles and
 the current styles, to show the difference.

 Current styles:

 [[Image(https://cldup.com/g_PpaoIGPn.thumb.jpg)]]

 Original background-image styles:

 [[Image(https://cldup.com/SXDysUo40c-3000x3000.png)]]

 It looks like we can get close to the original scaling using `object-fit:
 cover`... which unfortunately, is  not currently supported by ''any''
 version of IE, even IE Edge.

 Example of styles:

 {{{
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe {
         position: fixed;
         height: 100%;
         left: 0;
         object-fit: cover;
         top: 0;
         width: 100%;
 }
 }}}


 For comparison, here's the header image scaled/positioned with `object-
 fit: cover`:

 [[Image(https://cldup.com/im_SeBxDqN.png)]]


 For the video, here's two as-close-as-I-could-get-them screenshots of the
 same video used on 2017.wordpress.net:

 With current styles:

 [[Image(https://cldup.com/mWJDUFPQwB.thumb.jpg)]]


 With `object-fit: cover` styles:

 [[Image(https://cldup.com/U_rzLJYiBj.thumb.jpg)]]

 `object-fit` may not be the best fix - I'm not super-familiar with it
 myself so it could have issues I'm not aware of, and it will need more
 testing and a polyfill to cover unsupported browsers. Other suggestions or
 recommendations for fixing are welcome!

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39035>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform