- Overview
- Transcript
6.3 Create Fluid Images
In this final lesson of the course I want to show you a very simple technique for creating fluid images. That means they will shrink or get bigger depending on the parent element width. Also, they stay proportional.
So let’s see an example.
1.Introduction
1.1Welcome00:41
2.Typography
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion
7.1Recap01:47
6.3 Create Fluid Images
In this final lesson of the course, I wanna show you a very simple technique for creating fluid images. That means they will shrink or get bigger depending on the parent element width. Also, they stay proportionate. So let's see an example. I have a simple page with three images here. And two of them are placed inside a div with a class of container one and two, and one is just on its own. So the technique I'm talking about, means you gotta do this, max-width: 100%. That means that when you shrink your window, the images will resize accordingly. So let me just show you, if we change the width of these two containers. So container-1, let's say we make it about 50%. Yeah, this image resizes accordingly. Change it to 20% and it also resizes. And this also works with pixel values. So, container-2, change its width to about 200 pixels. And it also resizes. One thing to note here is that IE doesn't play ball with max width. So instead you will need to set the width to 100%. So you would do this instead. All right, well that was the last lesson. Thank you for watching.
