Bootstrap 4 image on card resizing

Question

I need to show a Bootstrap 4 card on my website, with a responsive image in its body. My HTML looks like this:

<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>

My CSS looks like this:

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

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

JSFiddle can be found here: https://jsfiddle.net/roelgeusens/064ebmvk/

I added a calculated height to the card body. The image resizes properly when reducing the window height and width. This is what I want to achieve, but it's not sufficient for my real life example. My card header can get any size and I need to be able to define the height on the complete panel, so i want to move the height: calc(100vh - 200px) style from the card-body div to my card div. My CSS looks like this than:

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

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

When I do this (so just changing the .card-body css style to .card), the max-height: 100% style is not working anymore on the image.

JSFiddle can be found here: https://jsfiddle.net/roelgeusens/rw1rhjnt/

Anyone who can help me?

Bootstrap 4 image on card resizing

0 Answers0