From the course: Learning Responsive Media
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Resizing raster images
Dealing with images in responsive web design means that we're going to take a focused look at how we use images. Traditionally, we would set our images to be the specific height and width we wanted the image to appear, and then optimize it through the safer web feature in Photoshop. For responsive designs we need our images to scale. We can no longer let images display at their default intrinsic dimensions. And simply let them be. They need to adapt to the screen, big or small. Thanks to CSS we can scale the images to fit their new found roles and responsive design. This is called fluid image or media. Along with fluid grids and media queries is one of the three pillars of responsive web design. In order for this to happen, we set the max-width property for images to 100%. Let's see how this CSS rule changes the images in a simple responsive layout. In our previous example, the columns were set to percentage values. So they adjust to the amount of real estate in the browser window…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.