I'm using Theme Twenty-seven years and am trying to control the behavior of header images / mediums for different screen resolutions / sizes.

The standard seems to only crop the image and change the aspect ratio when changing the screen to a lower resolution. Instead I want it to "zoom in", keeping the aspect ratio the same as the full screen layout. This seems to be the standard for image control panels.

I've played with a bunch of css setups, but can not seem to find the right one ...


To Solve this issue better to use javascript library imageScale();

Different options available in this(fill, best-fill, best-fit, best-fit-down).

You have to just include js file. then after using the following format for the image.

<div class="image-container">
  <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">

Now add this JavaScript code to your page.

$(function() {

The second option is to use another javascript imagefill.

<div class="container">
  <img src="myawesomeimage" />

  // image stretches to fill container

for more imageScale | imageFill

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.