So far we've covered how to set background images for your elements but what about styling img tags themselves? What about other types of media like audio and video? We'll be addressing those topics in this lesson. You'll also read through a walkthrough that takes you on a tour of the different ways you can style images and get started with audio and video on your webpages.

Styling Images

There are tons of ways to style images. Usually images are styled to be a desired width. Because there are so many types of devices with varied screen sizes viewing the web today, making images responsive is necessary. But what does that mean?

Responsive images respond to the changing window size. An average image gets cut off when the window width is smaller than the image's width. Making an image responsive involves applying styles that alter the image size to fit the width of the resizing window.

Here is the code to make that happen:

.img-responsive {
  width: 100%;
  height: auto;
}

Then you can apply the class .img-responsive to your images as you wish:

<img class="img-responsive" src="/assets/images/landscape.jpg" alt="Landscape">

Now the image will resize according to the width and height of its containing element. Of course, you may wind up with an image that resizes to the full width of your document which could make that image huge! This usually isn't the effect you want. To counter this side effect, create a container div and set it's max-width property. While you're at it, set the margin of the container to 0 auto to center it within it's container:

.img-container {
  max-width: 1024px;
  margin: 0 auto;
}

Then wrap a container div around your image with your new .img-container class.

<div class="img-container">
  <img class="img-responsive" src="/assets/images/landscape.jpg" alt="Landscape">
</div>

Now as you resize the window, you'll notice that the increasing image size stops at 1024px and also gets smaller once the window is below the width of 1024px. The height: auto setting on the .img-responsive class allows the height to adjust with the correct ratio to the original size of the image. Here are a few examples of what the various sizes look like:

Responsive image in a large window:

Responsive image in a small window:

As the window gets smaller the margins are adjusted to fit the size of the window. Setting up responsive images is fairly painless so you'll benefit greatly from adding those few lines of CSS to your application since at this point responsive web design is a must!

Shay Howe: Adding Media

Now that you've got a jump start with styling images your task is to read Shay Howe's walkthrough on Adding Media. He'll walkthrough some more details on working with image styles as well as provide examples of embedding audio and video in your documents.

Code Review

The important bits of code from this lesson

.img-container {
  max-width: 1024px;
  margin: 0 auto;
}
.img-responsive {
  width: 100%;
  height: auto;
}

<div class="img-container">
  <img class="img-responsive" src="/assets/images/landscape.jpg" alt="Landscape">
</div>

Wrapping Up

Now that you understand the basics of styling images you can use responsive images in all your projects! You can also embed audio and video in your pages which is made super easy with the audio and video tags. Adding media to your webpages definitely makes them stand out to the user. Understanding the basics of how to do this is important, though during practical development, providers like YouTube or SoundCloud will typically provide you with the exact code you need in order to embed their particular media. If you ever do use raw audio and video files you now know exactly how to display them!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!