Image gallery lightboxes have been around for many years. They generally provide a great user experience until you attempt to load an image which is larger than the viewport dimensions. Developers often forget this important check and you’re presented with a centered image which is difficult to remove. The problem can be exacerbated on mobile devices.
Until recently, image lightboxes would need to implement several equations to determine the viewport and image dimensions then size and center accordingly. Fortunately, we can now rely on CSS3 media queries and transforms to do the hard work for us.
The HTML
Little to see here — we have an img and we’ll assign a class of “ri” (responsive image):
<img src="http://lorempixel.com/600/450/" class="ri" />Remember to remove any height and width attributes.
Fallback CSS
IE6/7/8 do not understand media queries or transforms so our image will end up in the wrong location. There are shims and proprietary properties which could solve this but, in my opinion, they often cause more problems than they solve, i.e. increased page weight, degraded performance, maintenance headaches, etc.
Therefore, the following code provides a reasonable fallback for legacy browsers and should work on most landscape-oriented desktop screens:
img.ri
{
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}The border-radius and box-shadow won’t be understood by old IEs either, but they’ll degrade gracefully.
Positioning the Image
To center the image, we move its top-left corner to the center of the viewport. To move it back to the true center, we use an appropriate transform (with prefixes for older browsers):
img.ri:empty
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}Take note of the selector: img.ri:empty — empty is a structural pseudo-class which only matches elements which have no children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration. We could have used an alternative, such as Conditional Comments, but this seems a far more efficient solution and requires just six additional characters.
Making the Image Responsive
Our image must respond to the viewport dimensions to ensure it never overlaps the edge:
- a maximum width must be defined if the viewport is taller than it is wide, and
- a maximum height must be defined if the viewport is wider than it is tall.
We can use the media query orientation property to do the hard work for us:
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}Simple — and all done without any complicated JavaScripting. View the demonstration…
Please use the code as you like for your own projects. It could be used as the basis of your own modern, lightweight lightbox. Unless you’d like me to write one and provide a handy tutorial? Please forward your requests to @craigbuckler.
