Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Making images responsive

From: CSS: Frameworks and Grids

Video: 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.

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.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13406 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.