Cropping Images for Responsive Design

View Demo | Download Source

A common solution for images in responsive design is to add a max-width of 100% to all images. This allows for the images to scale relative to the container that it is in. This method is easy to implement, but what happens if you don’t want the image to scale, and you would rather have it crop depending on the size of its container?

small-mapAn image of a map is a perfect example of this. Let’s say you have an image of a map with a pinpoint of a location. If you were going to use the “max-width: 100%” method the street names would become very small and hard to read.
What you could do instead is to have the image as a background-image instead of coding the image in the HTML. Then you set a height and width to the container, set up the background image, and position it “center center” (if the pinpoint is in the middle).

A nice example of this could be seen on the Specless Contact Page. If you scale your browser’s width, you could see that this method does not scale down the image, but crops it, allowing the text to remain legible.

Since this method is using CSS to specify the background image, you could also load a different background image in your media query. You don’t have to worry about double downloading images because it is in the media query, so only one image will be seen. This allows you to possibly load a smaller image to account for faster loading on mobile devices.

This method is only one solution to the large problem of images and responsive design. More solutions are being developed as we move into the future. The main goal is to load the right image for the right device at the right time. There are a few jQuery plugins that help with this, but they require extra markup and may not be the most user friendly when it comes to a CMS. To learn more about this problem, check out Smashing Magazine’s article Choosing a Responsive Image Solution.

  • Share by Email