I am using the Twenty Seventeen theme and am trying to control the behavior of the header image/media for different screen resolutions/sizes.

The standard seems to be just cutting the picture and changing the proportions when changing to lower resolutions screen. Instead I would like it to "zoom", keeping the same proportions as for the full screen layout. This already seems to be the standard for the panel images.

I played with a bunch of css settings, but just can't seem to find the right one...

Thanks for your help!

I am using the Twenty Seventeen theme and am trying to control the behavior of the header image/media for different screen resolutions/sizes.

The standard seems to be just cutting the picture and changing the proportions when changing to lower resolutions screen. Instead I would like it to "zoom", keeping the same proportions as for the full screen layout. This already seems to be the standard for the panel images.

I played with a bunch of css settings, but just can't seem to find the right one...

Thanks for your help!

• header-image
• theme-twenty-seventeen

1 Answer 1

you can use this javascript library imagefill
demo here 2nd section "Новости"