Bootstrap-4-Image

Bootstrap 4 responsive image in card body

by Roel Geusens

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          Bootstrap 4 card
        </div>
        <div class="card-body">
          <img src="https://www.splendidbeast.com/wp-content/uploads/2017/10/Regal-Cat-resized.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.card-body {
  height: calc(100vh - 200px);
}

.card-body > img {
  max-height: 100%;
  max-width: 100%;
}