Making images responsive
Video: Making images responsiveIf you're using a fixed grid, you won't really need to adjust how you approach adding images to your site. If on the other hand, you're using a responsive grid, your content will flex and change based on the screen size, and your images will need to do the same. Although the framework we have been experimenting with in this course has built-in support for responsive images, many frameworks do not, so let's take a look at how this technique works and the tweaks that you might need to make within your chosen framework. If I preview that in my browser, this should look familiar to you, so it's just sort of this basic page layout that were working with earlier.
- Additional resources
Viewers: in countries Watching now:
Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks available—including the most popular choices among working web developers—and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.
- Understanding boilerplates, grids, and frameworks
- Choosing a framework
- Building your own framework
- Crafting a deployment strategy
- Modifying files
- Customizing typography and color
- Filling in framework gaps
- Exploring grid-based syntax
- Nesting grids
- Using mobile grids
Making images responsive
If you're using a fixed grid, you won't really need to adjust how you approach adding images to your site. If on the other hand, you're using a responsive grid, your content will flex and change based on the screen size, and your images will need to do the same. Although the framework we have been experimenting with in this course has built-in support for responsive images, many frameworks do not, so let's take a look at how this technique works and the tweaks that you might need to make within your chosen framework. If I preview that in my browser, this should look familiar to you, so it's just sort of this basic page layout that were working with earlier.
We have a two-column layout going on here, and I want to sort of insert some images on the page. So what I'm going to do is in the first paragraph of my Main Content, I'm going to go ahead and throw an image in there, so I'm just going to do image, and we're going to do source for that, that ="_images/rwd_james.jpg. I'm not really that narcissistic. I just didn't have that many images laying around. I'm going to go ahead and give it an alt tag of james.
Now, you might notice something pretty interesting about this, and frankly I'm going to copy and paste this for my next image, because watching me type I'm sure it's pretty boring for you, so I'm going to copy that. You'll notice that we didn't add any width and height values, and that's pretty common for images, but for when you're using responsive images, if you want those images to scale, having to define width and height is a no-no. So I'm going to remove the width and height from those. Now, next I'm going to do is go down to my aside, and in that first paragraph I'm just going to go and paste this image--we'll just use the same image on both of these. It'll show you really how responsive they are.
So if I Save this, and I go back into the browser and Refresh the page, you're going to see that even though I'm using the same image, these images are drastically different in terms of size. They're being sized based upon the content they're placed inside of. Now that's something that baked into the framework, so I want to take a look at that, but before we do, let's take a look at how we can sort of flow the text around them by using some of the classes that are already in the syntax. So I'm going to go up to my main image, and I'm going to go ahead and apply a class to that one of left, then I'm going to go down to my sidebar, and I'm go ahead and give it a class of right.
Now we have used those classes a couple of times in the course so far, so essentially what those are doing, of course, are doing a float left and float right, and now I can see that the text is wrapping. Now because they don't have enough room in the sidebar, the text isn't wrapping there. But another thing that I want to show you guys is that notice as I resize the page, the size of the image is changing as well, so that's really making these images responsive. There are a couple of things going on here that I probably would want to tweak. I want it to first have margins on there so that the text isn't butting right up against the image.
Now to do that in a very similar way that were working with our site, I have created a custom.css page and already linked it over here. So, if you're working from a different code editor than Dreamweaver, just go ahead and go over the _css folder in this directory and open up custom.css. So inside that, I'm going to do two very quick selectors here. I'm going to do image.left, so if image has the left class applied to it, go ahead and give it a margin-right of 1em, and I'm going to do a very similar selector for the image with right class applied to it, image.right, and that one I'm going to margin-left of 1em, so regardless of where they're found, it will hold the text off of them.
And again, if I refresh the page, you can see that it sort of creates a little bit of spacing there for me, which is perfect. I mentioned before that Foundation sort of has this responsiveness for images baked right into the framework, but what if you're using a framework that doesn't? How do you do this? So I'm going to click over to the foundations.css, and I'm going to show you how this is done so that you can add this to a framework if you need to or even really kind of do it on your own or if you're browsing through a framework CSS so that you know what to look for. The first thing I'm going to do is rather than try to just scroll down and find this, I'm going to show you a technique that I use all the time when I'm working with framework code, if I'm trying to find something.
I'll go up, and I do a Find and Replace and just inside the current document I look for image. Now I'm not going to replace anything, but what this allows me to do is just jump down through all of my image styles to see what's being applied, because sometimes you don't really know where styles are being applied. So we're seeing that if an image is found inside of a link, it's removing the border from it. I see something here with the googlemaps and canvases, so that means that those would be specific sort of widget elements, so I can kind of ignore those. We're trying to avoid a page break inside of an image, that make sense. Ah, here we go.
So, down on about line 359 for me I'm noticing that there is an image selected that says max-width of 100%, and that's what's important about this. When you have an image that the width and height of it aren't defined, and you give it a max-width of 100%, it essentially tells that, hey, go ahead and scale up to your maximum size within that container, and that's why our images are different sizes based on where they're found within the container. Now if I keep going through my styles, I can also see that we have a max-width and height of auto, that basically means that, hey, I need you to constrain yourself to your proportions so that you remain the same.
And we also have one more style in here that for Internet Explorer is turning interpolation-mode on to bicubic, and one of the really sort of knocks on doing this where you're scaling your images is within Internet Explorer, its scaling factors can really damage image quality. So by turning interpolation-mode to bicubic, it improves the quality of the images when you scale them within Internet Explorer. And that's pretty much all that we really need to do. Now some of the other image styles you have really are just controlling images when they're found in specific areas, so we can sort of ignore those.
Those were the ones that I really want to focus on. Now you know how the technique works. Just remove the width and height from your images and just apply a max-width of 100% to them. That works pretty well, but there is a problem with that. In Internet Explorer 8 only, if you don't have a definitive width applied to it as well, it can actually cause your responsive images to stretch with its width, but not its height. It's a weird thing, but we're used to that with Internet Explorer. So what I'm going to do is I'm going to go my custom.css here, I'm going to open this file, and I'm going to open this as a separate file, and then I'm just going to do a very quick Save As, and I'm going to save this in the same directory, _css as customIE8.css.
Now obviously, if I were creating a larger custom file, I would probably bring one of these selectors down, but as it is, I only have two in here, so I don't really need to worry too much about doing that. But what I'm going to do for each of these is I'm going to apply a width value of auto, and by setting that width value of auto I'm sort of addressing that bug that I'm going to find in Internet Explorer 8, and those are all things that you need to be aware of that, hey, in Internet Explorer 8 this bug happen when you use a maximum width of 100%.
So, even if a framework like Foundation takes care of something like this, you still need to be aware of the techniques, so you'll know if you need to go in there and sort of massage some of the styles that the framework has. Now, I only need this to happen when Internet Explorer is going on. So what I'm going to do is I'm going to take the link that I have right here to my custom CSS, I'm going to copy that, paste it down below that, and I want to link it to the customIE8. Now I only need these styles loaded up if Internet Explorer is involved, so I'm going to go ahead and do a conditional comment that allows me to target Internet Explorer.
So I'm just going to do an HTML comment, which is the angle bracket, exclamation point, dash-dash, and then inside of that I want to do in bracket notation if IE8, which allows me to target that browser specifically, then I can close that and then I can in the comment on the other side, with an exclamation point and in brackets endif, close the brackets, and then just close the comment by doing dash-dash, right angle.
So now I have basically created a conditional comment, it's only going to load up these custom styles if Internet Explorer is the browser. Otherwise, it'll ignore it and use this one. So obviously this will probably be part of a much larger strategy, and I wouldn't be doing it just for images, but that's something that you need to be aware of that occasionally with a framework, you'll still need to do some tweaks, you'll still need to do some browser workarounds, and you'd probably--if Internet Explorer is involved--want to put them in a separate stylesheet and load them up conditionally. So keep in mind that although most responsive frameworks are going to have some type of support for responsive images built in, you need to understand those techniques and the potential issues surrounding them so that you can modify your framework styles if needed.
There are currently no FAQs about CSS: Frameworks and Grids.