Useful technique this. When building a responsive panoramic image (such as with a screen-wide banner) it’s often required to limit it with a max-height surrounding div with overflow:hidden, so the image doesn’t get too deep on wide screens and push content down too far. This tends to leave the image subject cropped uncomfortably, with only the top part showing, leading to the wonk effect:
The simplest way to get round this (avoiding paralax scripts that may require painstaking image sizing) is to use what I call a phantom image. In short you set the img to visibility:hidden, to maintain the parent div ratio when max-height is not in effect, and set the parent div background to the same image, with background-position:center, and background-size:cover.
This enables your image to respond as normal on smaller screens, whilst on larger screens it allows the height to be restricted by max-height and keeps the image centered – not cropped off at the bottom.
It’s still cropped of course, but the effects of a center crop on most images is much less troublesome.
The code is simple, looking something like this:
<div class="container"> <img src="whatever.jpg" class="image"/> </div>
<style> .container{ backround-image:url(whatever.jpg); background-position:center; background-size:cover; } .image{ visibility:hidden; } </style>
One gotcha: If you support old browsers like Internut Exploder 8, which cant handle background-size:cover, you’ll need to use a conditional to show the image – set visibility:visible.