Bootstrap images

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:

• img-rounded

• img-circle

• img-thumbnail

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) 
        { 
          ...