These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
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.
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!
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.
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>
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!