Join James Williamson for an in-depth discussion in this video Creating fluid images, part of Applied Responsive Design.
Earlier in the course, we saw how background images can be very effective in responsive design, but not only giving you flexible containers that can change how much of the image they reveal, but also allowing you to swap out images at smaller screen sizes using media queries. Well, that's great if the images are purely decorative, but what if you actually need the image element itself? Images are, by their nature, a fixed size, and incorporating them into a fluid layout can quickly ruin your well-planned design. Take a look at our page here. This is the media.htm file found in the 04_01 directory. And I am just previewing it in my browser and I notice that this a two-column layout. The flexible columns, the one on the left is a good bit wider, I think, probably is 60%-70% than the one on the right-hand side, but these images are just not getting with the program.
Notice that this nice image of the sailboat up here in the water at the sunset is a lot wider than the column that it's inside of it. As a matter of fact, it's just sort of forcing its way right outside of it, and it is just ignoring the flexibility of our column. We don't really have any better results over here with this picture of a flower that is inline in a paragraph. The sailboat's in its own paragraph, and I notice that when I flex here, it is just not listening. So these guys aren't behaving at all. Now, I know some of the techniques that I have been showing you guys in responsive design take a little bit of work.
Thankfully though, making our images fluid doesn't take a lot of work at all, so let's take a look at some of the techniques that we can use. So, I am in my code editor here, and I have opened up the media.htm file. I just want to show you where these images are and show you a little bit of how these images are structured as well. You'll notice that the image inside the paragraph, the image of the flower there, it has a class applied to it called inline, so it is a little bit of foreshadowing; we are going to be using that in a moment. You'll also notice that that there are no width and height attributes, so if you want to make your images fluid, that's step number on.
Within the code, go ahead and strip out any of those width and height attributes or just don't put them in. If you don't put them in and your images aren't fluid for whatever reason, it's okay, because the browser will take the image and just show it at its native size, so you don't really need them. As I scroll down, I can see that our other image of the sunset there in Key West is sitting inside of its own paragraph and it does not have the class of inline. Okay, so I am going to scroll right back up. And it's a very simple layout, as I mentioned. We have a 60% column on one side, 35% column on the other. When we go down below 100 pixels, we take everything down to a single column, so, very, very simple.
Just above the first media query, I am going to go ahead and write our first selector, and this one is just going to be an image selector, img. So if you want to target some images specifically in your style sheets, you'd use classes or IDs or some type of specific selector, but right now we are just using the global image selector, all the images on the page. So what we are going to do is we are going to use a property called max-width, and what max-width does--and we are going to go ahead and give it a max-width of 100%. Now, you might have been tempted to say, well, what about giving it a percentage for width? Well, that would work. That would absolutely work. But max-width, on the other hand, instead of talking about the width of the image, talks about the width of the container.
So what max-width is saying, it's saying hey! Whoever you're inside of, you can only be as wide as 100% of the container. So, as long as your image is actually a little larger than the container that it's inside of, your image quality is going to be fine and it is going to scale to fit. The other nice thing about this technique is that we don't have to put height auto or put any height value. The intrinsic aspect ratio of the image will be maintained by the browser. So if I save this, go back into my browser, and refresh the page, you can see what happens.
Automatically, our image right up here in the right-hand column is fixed. As soon as I resize the page, it resizes as well. Now, you may have remembered how large it was when we first looked at our page, and you might think, well, wait a minute. That column is really, really small. Why did you make that image that big? Well, remember, at 800 pixels, we go down to a single column, and when I do that, it's going to show up rather large. So one of the tricks of using fluid images is understanding exactly how big this image needs to be in order to display properly. It does sort of expose one of the downsides of using this technique.
You're likely going to be using a larger image than you actually need almost all of the time. You certainly don't want to have a smaller image that needs to scale up to fit that 100% of its container, because if you have that, you're going to lose image quality, and that means that on mobile devices and smartphones and tablets and things like that, you're going to make your users download a larger graphic than they actually need. But the trade-off of that is that you get an image that's going to fit anywhere, and it's going to flex right along with your layout. Now, that worked perfectly for our sailboat over here, but what about our flower? I notice that as I scale, my flower doesn't really scale at all, until it starts to already take up that 100% width, and that has everything to do with the fact that currently it's inline, so it is, along with the rest of the paragraph, is kind of doing what we told it to do.
What happens when we have a situation like this, where we have an image that's inline in text? Well, first off, you're probably going to use float to wrap the text around the image in the first place. Believe it or not, that's kind of what float was designed for, so we are going to do that. And once we do that, then we can more precisely target exactly how wide we want this image to be and do it in a flexible manner. So if I come back into our CSS, I am just going to create one brand-new selector here, and I am going to use that inline class that I showed you guys earlier. So write the selector for inline, and inside that I am indeed going to float this to the right so that the text will wrap around it.
I am going to give it a margin, and the margin I am going to give this is 0 for the top, 0 for the right, 1 em for the bottom, 2 ems for the left. So, that's going to deal with the text wrapping around it. It's going to give a little bit of space between the image and the text on the left-hand side, and it's also going to give a little space on the bottom as the text wraps underneath it. Now comes the flexible part. Now I am going to go ahead and say width, and this time instead of using maximum width, I am just going to use an actual width, and I am going to do 45%. So what that's going to do for me is it's going to say hey, this parent paragraph that you're inside of, which is filling up the entire column, I want you to only be 45% of that.
So remember, when you use percentages on width, it refers to the percentage of the parent that it is inside of. And the next thing that I am going to do is I am going to set a minimum width, and this is one of the really neat parts of this technique. Specify a minimum and a maximum width for my images. So, depending upon how it fits within the layout, if it scales way up for example, you might at some point say, okay, you're allowed to flex until you get to 400 pixels wide and then stay right there. In this case, I am giving it a minimum width so that when we go down to a smaller screen size, it's not getting any smaller than that.
If I save this, go back in, and refresh the page, now you can see our image is appearing at 45% of as wide as the paragraph, our margins are working, and as I resize the page, it flexes as well. Now remember, we have a minimum width of 200 pixels, so when it gets to that 200 pixels, about right there, it doesn't get any smaller. That helps it stay proportional to the text that it's inside of and never get tremendously small. Now when we go down to a single-column layout, it does the same thing. It goes down to 200 pixels and it just freezes there.
Now, that might be acceptable for you, but at a really small screen size, you might think that this is a little hard to read--I know I do. So I am going to go back into our styles, and what I am going to do is I am going to go right underneath the existing media query and I am going to write another one. Now, earlier in the course, I talked about letting the content determine where your breakpoints are, and one of things I did when I was building this exercise is I started to resize my page and I said, you know, at what point should this image really sort of take over and fill up that entire column? It's when it got to a certain size and I just kind of froze the screen right there and said, okay, about right there is good and then I wrote the media query to go along with that breakpoint.
So don't feel like you have to stay in the sort of dogma of, okay, 320 is mobile, 480 is mobile, 726 is tablet; you don't have to do that. You can let the content drive this. All right, so I am going to say @media screen, and this gives us some good practice writing media queries as well. max-width of 550 pixels, so this time I have found a breakpoint around 550 pixels. And then inside this I am going to write my inline selector again, so inline.
And this time, inside of this, I am going to say float: none, so I am turning the float off. I am going to say, display:block so that it occupies its own line. I am going to give it a margin of 0 for top, auto for left and right, and 2 ems for the bottom, so that's going to center it within that space. And then, just to give it a little bit of flexibility, we are going to give it a width of 90% and a minimum width of 300 pixels. So I am going to save that, refresh my page, and now as I begin breaking it a little further down, you will notice that right when I get to this breakpoint, it goes to a display property of block.
It occupies that whole space. It's got a little bit of margins underneath it there, and notice that it has a minimum width of 300 pixels, so even as I get down smaller, it's going to freeze right there. Now, there's one thing I want to point out here: the techniques that I showed you guys earlier, the maximum width technique, it's actually been around for a long time. As a matter of fact, I have got a link right here to an article by Ethan Marcotte called Fluid Images, where he talks about that technique. He wasn't the first guy to come up with it, but he really sort of expanded on it and brought it into the lexicon of responsive design techniques.
But in that article he talks a little bit about supporting older versions of Internet Explorer, so if that's something that you need to do, you want to check that article out. And these techniques, as I mentioned before, they're really not that hard, but they do fail to solve many of the issues related to responsive images. For example, in order to protect image quality, your image is usually going to be a little bit larger than you actually need, and there's no real way to swap out images at smaller screen sizes if you need some sort of an editorial change. So if you resize your screen for example and when it gets really small you wanted a bigger picture of the boat, there's really no way to do that with the techniques that I have showed you here. Still, this is a very good start, and it can be a great solution in most instances.
Now, for more information on responsive images and to learn more about the techniques that are evolving to solve the problems surrounding them, check out some the resource links in this exercise, as well as the additional resources movie at the end of the title. And I can recommend very, very highly The Problem With Responsive Images, by Matt Wilcox, where he goes into sort of where we are currently with responsive images and why none of the solutions that we have right now really give us the full range of solutions that we need. And then for resources, a really good way to keep up with what's going on with responsive images is to bookmark and keep checking out the Responsive Images Community Group.
These guys are part of the W3C.org, and they are committed to bringing several types of solutions to responsive images. So this is a good group to track, follow, and see what they're currently doing in the field of responsive images.
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites