Bootstrap 4

by Austin Anderson

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<h1>
  Original Images
</h1>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      <img src="https://pecb.com/conferences/wp-content/uploads/2017/10/no-profile-picture.jpg" />
    </div>
    <div class="col-4">
      <img src="https://www.mobafire.com/images/avatars/teemo-classic.png" />
    </div>
    <div class="col-4">
      <img src="https://lumiere-a.akamaihd.net/v1/images/darth-vader_6bda9114_e7820538.jpeg?region=0%2C70%2C1400%2C788" />
    </div>
  </div>
</div>

<hr />
<h1>
  Background-sized Images
</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="card-deck">
        <div class="card">
          <div class="card-img" style="background:url('https://pecb.com/conferences/wp-content/uploads/2017/10/no-profile-picture.jpg')"></div>
          <div class="card-body">
            test
          </div>
        </div>
        <div class="card">
          <div class="card-img" style="background:url('https://www.mobafire.com/images/avatars/teemo-classic.png')"></div>
          <div class="card-body">
            test
          </div>
        </div>
        <div class="card">
          <div class="card-img" style="background:url('https://lumiere-a.akamaihd.net/v1/images/darth-vader_6bda9114_e7820538.jpeg?region=0%2C70%2C1400%2C788')"></div>
          <div class="card-body">
            test
          </div>
        </div>
        <div class="card">
          <div class="card-img" style="background:url('https://pecb.com/conferences/wp-content/uploads/2017/10/no-profile-picture.jpg')"></div>
          <div class="card-body">
            test
          </div>
        </div>
        <div class="card">
         ...

CSS

body {
    margin: 10px;
}
img {
  max-width: 100%;
}



.card {
  height: 500px;
}

.card-img {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100%;
  height: 100%;
}