Question

如果我在列中有一张卡片，需要有一个设置高度的图片，我该如何让它不伸展，就像我目前在我的代码示例中一样？而且无需在图像上设置宽度，因为我希望它可以替换。

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

＆＃13;

.card-block {
  padding: 20px;
}

＆＃13;

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

＆＃13;

Answer 1

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

所以例如......

<强> CSS

val family =
      generateFamilyLinks(references, superNodes.filter(_.linkType == FAMILY))
        .checkpoint(eager = true)
    direct
      .union(reciprocal)
      .union(transitive)
      .union(family)
      .groupByKey(_.key)
      .reduceGroups((left, right) =>
        left.copy(
          contributingReferences = left.contributingReferences ++ right.contributingReferences,
          linkTypes = left.linkTypes ++ right.linkTypes,
          contexts = left.contexts ++ right.contexts
        )
      )
      .map(group =>
        group._2.copy(
          contributingReferences = ArrayUtil.dedup(group._2.contributingReferences, _.key)
        )

Answer 2

在Bootstrap 4中使图像响应非常简单：

您只需将img-fluid类添加到图像中即可。

但是......响应性是有代价的，那就是：你无法为响应式图像设置最小高度（因为这本身会使图像无响应）。

幸运的是，有一些解决方法可以管理卡片图像的大小，同时仍能保持响应。您可以通过操纵水平填充（使用px-*类并将*替换为0到5之间的数字）以及增大或减小列宽来实现。

看看这里的3个例子：

＆＃13;

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

＆＃13;

Answer 3

通常，在使用Bootstrap时，你应该使用带有容器或容器流体类的div，然后使用行类的div。这对我有用

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

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

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

3 个答案: