Browser optimize

How to style flexible images for RWD

Ryan Boudreaux shows how to incorporate flexible images and objects into your Responsive Web Designs.

This is the final post on the Responsible Web Design focus. The first introduced RWD, reviewed the nuts and bolts, and explained why it ought to be required for web sites. The second post showed you how to create media queries and get your web sites another step closer to universal responsiveness across all devices. In this post, I will review how to get your images and videos to become flexible along with the other content. The HTML and CSS code for the demo pages used below can be found in the associated download, so you can follow long.

Flexible images

Now that we have our maximum and, in some cases, minimum resolution set to adjust when various devices are detected, we now need to work on making our images flexible as well. Text already takes care of itself and wraps within the given containers as they resize, as shown in our demo page from the last post. Figure A shows the iPhone test page; however, notice that it does not contain any images.

Figure A

As a rule of thumb, we have always been told to set our images to a specific height and width in pixels, but the downside, of course, to setting absolute image sizes is that they are not flexible. Therefore, fixed image dimensions become difficult to view in smaller screen sizes and resolutions. The fixed images may be perfect for desktop or laptop displays, but fail when rendered on smaller devices.

First, we will add in a fixed width image which is purposely larger than the maximum width of the container at 800px x 600px, as shown in Figure B.

Figure B

We now add in the following line between the first and second paragraphs of the article, <img src="i/servers.gif" alt="Servers" title="Servers">. Viewing the demo page in Chrome 20.0 in Figure C, you can see that the 800px wide image looks a bit large in the full view.

Figure C

However, when we scale the browser down to a width of 1040 pixels, we see that the image bleeds to the right side of the article container as shown in Figure D.

Figure D

The rule to keeping images within their container is actually quite simple. With the image max-width style set to 100%, we are effectively stating that the image will match the width of the container in which it is included:

img {
  max-width: 100%;
}
Refresh the screen and reduce the viewable area to 965px, and notice that the image now resizes to fit the article container as it is expanded or contracted to the available space (Figure E).

Figure E

And now, the same demonstration page viewed in the iPhone test simulation page is displayed in Chrome 20.0 below.

Figure F

Modern browsers have developed the capability to resize images and other objects proportionally, so that as a flexible container shrinks or grows the aspect ratio will remain the same. Speaking of objects, we can kick up our selector to include embedded objects, and video objects:

img, embed, object, video {
  max-width: 100%;
}

IE 6 and lower

IE 6 and lower do not respond to the max-width limitation, but will respond to a width rule of 100%, so a separate stylesheet for IE6 would be necessary if you know your customers are still running on the aged browser.

img, embed, object, video {
  width: 100%;
}

While this will solve the issue of larger images, which need to scale down and match the maximum width of the container, this will also force small images such as thumbnails, which are smaller than the associated container, to expand to fit the maximum space. If you do not want an image to scale up, another selector must be created.

Ethan Marcotte has another way of dealing with legacy browsers and getting fluid images to resize and behave well with this script, which cycles through the web document and automatically recalculates the proper proportional height and width of the image, and resizes the spacer graphic accordingly.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments