From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Making images flexible - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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 do to help us with…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Designing for flexible layouts2m 30s
-
(Locked)
Calculating percentage values8m 45s
-
(Locked)
Setting flexible width values6m 6s
-
(Locked)
Making images flexible8m 10s
-
(Locked)
Setting minimum and maximum widths7m 24s
-
(Locked)
Building flexible layouts: Lab4m 53s
-
(Locked)
Building flexible layouts: Solution6m 47s
-
(Locked)
-
-
-