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