How do you resize an image so that it fits inside a fixed size container while maintaining its aspect ratio? The apparent solution is to set the image width, height, min-width and/or min-height to 100% or auto. However, this solution is not generic enough to handle images with varying aspect ratios properly. Here is an example:
CSS3 provides a solution (well, sort of): the
background-size property. The interesting values for this property are:
contain: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
cover: Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
Unfortunately, this technique applies to background images. Using background images instead of
<img> tags will create accessibility issues, e.g. users cannot right click to save the image. One possible workaround is to use a link that points to the actual image as the background image container. Another, possibly bigger, issue is that search engines do not index background images. One workaround is to use image tags along with this technique but hide them using (SEO-friendly) CSS.
Time to see this technique in action: