最好的解决方案不是将图像直接放在页面上，而是创建一个空的div，然后将背景图像设置为https://placeimg.com/640/480/animals，再将其大小设置为cover，这样它将覆盖您指定的div的高度和宽度
比如说...

css

card-image-container{
     background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
     background-size: cover;
 }

在Bootstrap 4中使图像响应非常简单：
您只需将img-fluid类添加到映像中。
然而......响应速度是有代价的，那就是：不能为响应图像设置最小高度（因为这本身会使图像无响应）。
幸运的是，有几种方法可以在保持卡片图像响应的同时管理卡片图像的大小。您可以通过操作水平填充（使用px-*类并将 * 替换为0到5之间的数字）以及增加或减少列宽来实现这一点。
请看下面的3个示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Text goes here</p>
                    <p class="card-subtitle">More text goes here</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-6 px-5">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Column with px-5 class</p>
                    <p class="card-subtitle">to make the image smaller</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-5 px-5">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Smaller column AND px-5 class</p>
                    <p class="card-subtitle">to make the image even smaller!</p>
                </div>
            </div>
        </div>
    </div>
</div>

通常，在使用Bootstrap时，应该使用div和container或container-fluid类，然后使用div和row类。

<div class="container">
 <div class="row">
  <div class="col-md-6">
   <div class="card">
   <img class="card-img-top" src="https://placeimg.com/640/480/animals" 
    alt="Card image cap" height="200">
   <div class="card-body text-center">
    <p class="card-text">Text goes here</p>
    <p class="card-subtitle">More text goes here</p>
    </div>
   </div>
  </div>
 </div>
</div>

卡片知道是痛苦的..但我希望这能有所帮助。