In a single column “mobile view”, taller images appear more important than wider images. We came across this unexpected maxim while working on a recent responsive design. Our design employed a ~3:1 hero image with three ~4:3 thumbs below it. At full width it was the proper hierarchy: Biggest == Most Important. However, when resized and folded into a single column, the 3:1 image appears to be about ½ the height of the 4:3 images below it.

Narrow your browser width to see the visual hierarchy breakdown:

View “BEFORE”

Pretty unacceptable to lose hierarchy on such a major feature of the site - especially when e-commerce and products are involved. We had to come up with a solution.

Uncle Dave’s Squeeze n’ Crop Method

We wanted stop the image from scaling once it reached a certain height. Here’s what we did:

<div class="banner-item">
  <img src="http://placekitten.com/1200/600" />
</div>

First wrap the image in a DIV, this will act as an image-mask of sorts. Then apply some min-height + height + overflow: hidden magic to lock the image and hide the overflow:

.banner-item {
  overflow: hidden;
  min-height: 300px; /* 300px is arbitrary. */
}
.banner-item img {
  width: 100%;
}

/* 600px is about the width "locked in" at */
@media screen and (max-width: 700px) {
  .banner-item img {
    width: auto;
    max-width: none;
    height: 300px;
  }
}

The image hugs the left of the wrapper. Auto-cropping is never perfect, but if you want to adjust the focal point of the image, you can do that with position:relative:

/* OPTIONAL: Use to shift left as necessary */
@media screen and (max-width: 480px) {
  .banner-item img {
   position: relative;
   left: -40%
  }
}

Results

View “AFTER”

There’s a lot of playing around with what “feels good”. Adjust the breakpoint of your media query to where it feels like your image locks-in to the desired height. There might be some “Math” [/quotehands] based off of a conch shell that can help you with this, but I just go with my gut.