Responsive images

Tags
Responsive, Images

Here's some HTML:

  • <div class="container">
  •   <div class="row">
  •     <div class="col">
  •       <h1>Doggo</h1>
  •       <p><img src="doggo.jpg" alt="Doggo"></p>
  •     </div>
  •   </div>
  • </div>

The doggo photo is large, 1,024px wide.

Open the page with this code.

Reflect

Make the browser window smaller and larger. What happens to the image size?

If you were logged in as a student, the lesson would pause here, and you'd be asked to type in a response. If you want to try that out, ask for an account on this site.
Ray
Ray

Erm, nothing, the image stays the same size. I get scroll bars when I make the window smaller, because the image is too big to fit.

Right. Not great.

Show all

Let's add a class to the img.

  • <div class="container">
  •   <div class="row">
  •     <div class="col">
  •       <h1>Doggo</h1>
  •       <p><img class="img-fluid" src="doggo.jpg" alt="Doggo"></p>
  •     </div>
  •   </div>
  • </div>

Try this version.

Reflect

Make the browser window smaller and larger. What happens to the image size this time?

If you were logged in as a student, the lesson would pause here, and you'd be asked to type in a response. If you want to try that out, ask for an account on this site.
Ray
Ray

Better! The image resizes, with the browser window.

Right! That class on the img tag, img-fluid, makes images responsive.

That's the end of this lesson.

Adela
Adela

Wait, that's all there is to it? That one class?

Yep.

Up next

Responsiveness is something websites have to have these days. Another is accessibility. That's what the next lesson is about.