How To Make Images Flexible In Css: Page Layouts


show more Making images flexible provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

Making images flexible

As long as your page content is limited to a content that automatically reflows, like text, you'll be fine. However, once you start putting images and other fixed-width resources like video on your page, you are going to quickly find that your fluid layout has some limitations. So to demonstrate that, I have the fluid.htm file opened here from the 06_04 folder. And if I just open this in a browser, you can see we've added an image to our layout. And right now everything looks just fine. It's fitting in there fine. The text is reflowing around it okay.

However, if I begin to resize this image, watch what happens. Whereas the content and the columns are flexing, this image has a very fixed width. So at the end of the day, you just end up with this text running right over the top of it. It's colliding and it's tearing up your layout, and that's going to happen wherever you use fixed-width images within your fluid or flexible layouts. There are some things that we can ...

Making images flexible
Video duration: 8m 10s 8h 57m Beginner

Viewers:

Making images flexible provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...