7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

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

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.

Back to the top