Images can be made responsive by setting their class attribute to .img-fluid. This will scale the image in relation to its parent element by setting its maximum width to 100% and height to auto.

You also have the option to shape images with either rounded corners, circles, or with an outer border. This is accomplished by setting the <img> element's class to one of the following Bootstrap classes:

In the following image, we've displayed a list of employees, and their pictures. The list of employees could be retrieved from a database and passed to the view:

The code that achieves the preceding result, which can be viewed in the accompanying sample project for this chapter, is as follows:

@model IEnumerable<Chapter2.Models.EmployeeViewModel> 
<div class="container"> 
    <h2>Employees</h2> 
 
    <div class="row"> 
        @foreach (var item in Model) 
        { 
            <div class="col-md-4"> 
                <img src="@Url.Content("~/img/employees/" + item.Id +
                   ".png")" 
                 alt="@item.Name" class="img-circle img-responsive"> 
                <h3> 
                    @item.Name<small> @item.JobTitle</small> 
                </h3> 
                <p>@item.About</p> 
            </div> 
        } 
    </div> 
 
</div> 

In the preceding code, we looped through each employee item in the model and rendered an <img> element using the Id property as the filename. Each <img> element's class attribute was set to .img-circle that drew the image as a circle.