Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

What is a Responsive Image?

  • A responsive image adjusts the size of the image based on the screen size of the device viewing the web page
  • If you are going to create responsive websites, you should also be sure that both the page layout and the image sizes adjust to the screen size
  • Images are set to specific widths and heights in the browser when you add them to a web page, but you can modify this using CSS rules to make them responsive to the devices screen size
  • There are a few different methods available for creating responsive images, we will look at how to work with one of these methods
  • Open responsive-images.html and change the browser width and you will see the image change in size based on the width of the browser
  • That is an example of a responsive image, note how the image scales as the page size changes
  • You can be more precise in the image width than what this page uses, this is designed to show you the concept
  • The page named image-responsive-complete.html is a page that shows the final version of our responsive image exercise

What is a Responsive Image?

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Preview in Browser 0:45
  • What is a Responsive Image? 1:10
  • Eliminating Media Queries 1:49
  • Images on Larger Screen 3:43