具有设定高度的 Bootstrap 4 响应式图像答案

【问题标题】：Bootstrap 4 responsive image with set height具有设定高度的 Bootstrap 4 响应式图像
【发布时间】：2023-03-20 07:38:02
【问题描述】：

如果我在列内有一张卡片，需要有一个具有设定高度的图像，我如何使它不被拉伸，就像我的代码示例中目前的那样？并且不必在图像上设置宽度，因为我希望它是可替换的。

我错过了什么和/或做错了什么？谢谢！

.card-block {
  padding: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<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-block text-center">
      <p class="card-text">Text goes here</p>
      <p class="card-subtitle">More text goes here</p>
    </div>
  </div>
</div>

【问题讨论】：

我在这里发布了一个类似问题set image-height to img-fluid的答案：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您最好的解决方案是，您可以创建一个空 div，然后将背景图像设置为https://placeimg.com/640/480/animals，然后将其大小设置为覆盖，然后它将覆盖你指定的div

例如...

css

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

通常，在使用 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>

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

【讨论】：