由于图像较大，Bootstrap 4卡出界

Question

我正在尝试将卡片放在垂直的闪光灯内。垂直滑杆由许多这样的自举卡组成。

当卡片的图像足够长时，它只会部分显示，并且不会将其自身调整为其父元素的大小。

JSFiddle显示问题：https://jsfiddle.net/kxsnbw3h/6/

卡片的图像是否可以响应始终包含在可用空间中？

＆＃13;

＆＃13;

var vswiper = new Swiper('.v-swiper-container', {
  direction: 'vertical',
  speed: 2000,
  autoplay: {
    delay: 2000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

＆＃13;

.mh-50 {
  max-height: 50vh;
}

.clip {
  overflow: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/js/swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/css/swiper.css" rel="stylesheet" />
<div class="container-fluid">

  <div class="row">
    <div class="col-6 mh-50 clip">
      <div class="v-swiper-container">
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <div class="card">
              <img class="card-img-top img-fluid" src="//placehold.it/1500x200?text=Week-1" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Week 1</h4>
                <p class="card-text">Week 1 text.</p>
                <a href="#" class="btn btn-primary">Week 1 button</a>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="card">
              <img class="card-img-top img-fluid" src="//placehold.it/900x500?text=Week-2" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title">Week 2</h4>
                <p class="card-text">Week 2 text.</p>
                <a href="#" class="btn btn-primary">Week 2 button</a>
              </div>
            </div>
          </div>

        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <div class="col-6 mh-50">
      <img src="//placehold.it/200x100?text=Col-2" />
    </div>
  </div>
  <div class="row">
    <img src="//placehold.it/500x100?text=Row-2" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;