O'Reilly logo

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required