我如何保持卡片图像 Bootstrap 4 的宽度响应答案

【问题标题】：How do i maintain the width responsiveness on card image Bootstrap 4我如何保持卡片图像 Bootstrap 4 的宽度响应
【发布时间】：2019-08-08 18:12:48
【问题描述】：

CSS 新手请多多包涵。我正在尝试实现包含在card 中的响应式图像。最初，当它的 6 个图像在同一行时，它都按预期工作，即图像宽度是卡片的 100%，并且无论图像大小如何，它们都在中间垂直对齐。

当我调整屏幕尺寸时遇到问题，而不是保持 100% 的宽度（卡片）并将所有图像垂直对齐在中间，当前的行为如上面的 GIF 所示，图像浮动到卡片的顶部并且宽度不再是 100%。

这是引导程序，这是我的图像类的外观：

.card-img-top {
  height: 10vw
  object-fit: contain
}

提前致谢

编辑代码

<div class="row">
  <div-class="col-lg-2 col-md-4 col-6 mt-4">
    <div class="card>
      <img width="100%" src="https://i.ebayimg.com/images/g/mpsAAOSw9T9c~j93/s-l225.webp" class="card-img-top">
      <div class="card-body" style="text-align: center";>
        <div class="car-body-wrapper cards-body">
          <h6 class="card-subtitle">
            <a href="#foo" style="color: rgb(0, 172, 230);">BMW X3</a> 
          </h6><p class="card-text"> </p></div> 
      </div>
    </div>
  </div>
  ... //same for other 5 images

【问题讨论】：

是否有任何具体原因给出高度：10vw，因为打开开发工具坞时高度会有所不同。
能把所有相关代码都包含进去吗？
@Darth 我认为您可以使用 CSS 媒体查询进行响应式设计。
@Zim 查看所有代码的编辑
@VivekrajKR 使用了height，以便所有文本（即card-subtitle）对于所有卡片都水平对齐

标签： css bootstrap-4

【解决方案1】：

以下代码可能对您有所帮助，您可以根据您的网站需要以像素为单位拍摄图像。如果再次出现任何问题，请通知我。我会检查的。

<style>
   .card-img-top {
     height: 150px;
     width:100%;
    object-fit: contain;
  } 
</style>


<body>
<div class="row">
  <div class="col-lg-2 col-md-4 col-6 mt-4">
    <div class="card">
      <img src="https://i.ebayimg.com/images/g/mpsAAOSw9T9c~j93/s-l225.webp" class="card-img-top">
      <div class="card-body" style="text-align: center";>
      <div class="car-body-wrapper cards-body">
      <h6 class="card-subtitle">
        <a href="#foo" style="color: rgb(0, 172, 230);">BMW X3</a> 
      </h6><p class="card-text"> </p></div> 
     </div>
  </div>
 </div>

</body>

【讨论】：

@Darth 好吧.. :)

【解决方案2】：

对于响应式图像大小，您可以使用 CSS 媒体查询。您可以将 CSS 代码放在媒体查询中。以下代码将对您有所帮助。

<style>

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  

   /* Your CSS Code for this device size */    

  }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {  

   /* Your CSS Code for this device size */    

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {  

   /* Your CSS Code for this device size */    

} 
</style>

【讨论】：

感谢@Sandeep，已尝试将所有屏幕尺寸的图像宽度设置为 100%，但它不起作用？