Chapter 9. Creating Flexible Images

No matter how perfectly you build your liquid or elastic layout, it’s not going to work if you don’t make the content within it flexible too. Text is easy—it wraps by default. Images are where it gets tricky. Luckily, as you saw in Chapter 2, there are lots of creative ways to make your images—content images as well as decorative graphic elements—flexible to either the viewport or the text size. In this chapter, you’ll learn the CSS behind those flexible image examples.

Dynamically Changing Images’ Screen Area

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re ...

Get Flexible Web Design: Creating Liquid and Elastic Layouts with CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.