Responsive images

It is as straightforward as you would hope; just apply the img-fluid class to the element:

<div class="col-sm-3">
    <img src="images/small.jpg" class="img-fluid">
    <h5>Small</h5>
    <div class="row">
        <div class="col-sm-4">6x5</div>
        <div class="col-sm-4">8x10</div>
        <div class="col-sm-4">11x17</div>
    </div>
</div>
<div class="col-sm-3">
    <img src="images/medium.jpg" class="img-fluid">
    <h5>Medium</h5>
    <div class="row">
        <div class="col-sm-4">12x18</div>
        <div class="col-sm-4">16x20</div>
        <div class="col-sm-4">18x24</div>
    </div>
</div>
<div class="col-sm-3">
    <img src="images/large.jpg" class="img-fluid">
    <h5>Large</h5>
    <div class="row">
        <div class="col-sm-4">19x27</div>
        <div class="col-sm-4">20x30</div>
        <div class="col-md-4">22x28</div>
    </div>
</div>
<div class="col-sm-3 ">
    <img src="images/extra-large.jpg" class="img-fluid">
    <h5>Extra Large</h5>
    <div class="row">
        <div class="col-md-4">24x36</div>
        <div class="col-md-4">27x39</div>
        <div class="col-md-4">27x40</div>
    </div>
</div>

Take a look at Figure 2.15:

This is more like it; img-fluid is exceedingly simple in itself, essentially just adding a max-width: 100% rule to the image element. Now, the img element will respect the boundaries of its parent.

However, this simple approach also means that the feature is very basic. The browser still downloads the full resolution image, even though it may be rendered a fraction of the size. There are other libraries and services that help resolve the responsive images problem.

Bootstrap does, however, provide a neat mixin to help mitigate issues with retina displays. The img-retina mixin basically extends the background-image and background-size rules by allowing for two images and two sizes to be defined, one for standard displays and one for retina; img-retina takes the following form:

.img-retina(std-res-img, hi-res-img, standard-width, standard-height)

For standard displays, img-retina will set background-image to std-res-img, with the defined width and height. For retina display, img-retina will set background-image to hi-res-img, with the defined width and height values doubled.

For example, if we wanted to ensure that the Extra Large image is loaded in high resolution on retina displays, we could give it an extra-large-image class and apply that to a div:

<div class="extra-large-image"></div>

Using Sass, we would define extra-large-image as shown:

.extra-large-image {
    .img-retina('/images/extra-large_std-res.png', '/images/extra-large_hi-res.png', 700px, 400px)
}

This will result in /images/extra-large_std-res.png being loaded with the 700 x 400 dimensions in standard resolution and /images/extra-large_hi-res.png being loaded in 1400 x 800 on retina displays.