时间戳

首页 > 解决方案 > 如何在 Boostrap 4 的图像卡上放置响应式 Object fit 封面？

css - 如何在 Boostrap 4 的图像卡上放置响应式 Object fit 封面？

问题描述

这css从 Boostrap 4 中取出了卡片的响应式布局。我怎样才能object-fit: cover;在卡片的图像上放置一个，并从 Bootstrap 4 中获得响应式布局？

#imgUNcover {
  width: 285px;
  height: 145px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
<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="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">

  <div class="card">

    <div class="img-container">

      <a href="index.php?post=<?php echo $UN['title']?>"><img src="<?php echo $UN['capa']?>" alt="<?php echo $UN['alt']?>" class="card-img-top" id="imgUNcover"></a>

    </div>

    <div class="card-body">

      <a href="index.php?post=<?php echo $UN['title']?>" class="card-title cardTitleLink">
        <h1 class="cardTitleUN">
          <?php echo $UN['title']?>
        </h1>
      </a>

      <p class="card-text text-muted">
        <?php echo $UN['text']?>
      </p>

      <a href="index.php?post=<?php echo $UN['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

    </div>

  </div>

</div>

没有object-fit: cover;：

在此处输入图像描述

与object-fit: cover;：

在此处输入图像描述

我可以更改widthid 上的#imgUNcoverimagen ，但它不会解决不同结果屏幕中的问题。

编辑：

在此处输入图像描述

标签： cssimagebootstrap-4object-fit

解决方案

苏西，我要在这里冒个险，猜猜你在找什么。如果您需要其他结果，请告诉我，我会调整答案

为了使图像根据其包含块的大小调整大小，您可以在高度或宽度上放置一个百分比值。请在下面找到一个代码示例。

一些有趣的笔记（如果你想更深入一点）：

  • 您不必在图像元素上同时设置高度和宽度
  • 这样做是个好习惯，但没有必要
  • 原因是未设置的维度的计算值默认为auto。这反过来导致该属性的使用值等于：used value of other dimension / intrinsic image ratio
  • 实际上，这意味着您未设置的高度或宽度将发生变化，因此元素的内容框的大小将使得内容框的纵横比与图像的固有纵横比相同
  • 因此，更改object-fit将无效，除非您将其设置为none（none：图像将保持其固有尺寸，而其内容框保持您设置的内容）
  • 在这种情况下，我们希望使用 % 值，以在卡片大小发生变化时启用调整大小（响应性）
  • 然后我们必须确保容器块具有特定的维度集
  • 如果未设置（默认为auto），则其大小将等于其内容的大小
  • 这将导致无法解决的循环引用：孩子想要成为其父母大小的百分比，而父母的大小试图等于其孩子（ren）
  • 在这种情况下，您在内容框上设置的百分比将默认为自动
  • 这意味着它的行为就像根本没有设置
  • 如果未设置高度/宽度，则内容框使用的高度/宽度值设置为等于图像的固有高度/宽度
  • 因此，内容框很可能会很大（除非图像很小），并且会溢出其容器（参见溢出属性）
  • 最后，object-fit仅适用于图像的固有纵横比与您在元素内容框上设置的尺寸（高度/宽度）不同的情况

闭幕致辞：

  • Pheeew，很多笔记，但希望在解释内联替换元素的高度/宽度如何工作方面对您有所帮助
  • 各种元素的高度/宽度的 CSS2.1 规范可以在这里找到：10 视觉格式化模型细节
  • object-fit可以在这里找到MDN 文章： MDN object-fit

代码：

#imgUNcover {
  width: 100%;
  object-fit: contain;
}
<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="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
  <div class="card">
    <div class="img-container">
      <a href="#"><img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
    </div>
    <div class="card-body">
      <a href="#" class="card-title cardTitleLink">
        <h1 class="cardTitleUN">
          Some title
        </h1>
      </a>
      <p class="card-text text-muted">
        foo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foo
      </p>
      <a href="#">Continue Lendo</a>
    </div>
  </div>

</div>

最后，一支笔让您可以轻松地尝试调整浏览器的大小（以检查它是否响应）：https ://codepen.io/magnusriga/pen/xazZzg?editors=1100

更新（评论中要求添加的功能）：

为了确保所有图像的高度相同，您在卡片上设置了一个特定的高度，然后使用flexbox的flex-basis属性将其分布在卡片的图像区域（顶部）和主体部分。为避免弹性项目超出其弹性容器，只需使用overflow: auto，它会告诉块框在必要时添加滚动条。

修改 Bootstrap 功能的乏味部分是，与仅从头开始构建它相比，要检查的因素要多得多。很多时候，您必须投入!important以否决他们的描述符。

新代码：

.card {
  height: 400px;
}

.img-container {
  flex: 1 0 30% !important;
  // max-height: 30% !important; // <-- Alternative
  overflow: hidden;
}

.card-body {
  flex: 1 0 60% !important;
  // max-height: 60% !important; // <-- Alternative, though still need to control overflow
  overflow: auto;
}

#imgUNcover {
  width: 100%;
  height: 100%;
  object-position: 50% top;
  object-fit: cover;
}
<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">

    <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
      <div class="card">
        <div class="img-container">
          <a href="#"><img src="https://qph.fs.quoracdn.net/main-qimg-fdaa32b9bffc30131e56956e4bc1e9e4.webp" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
        </div>
        <div class="card-body">
          <a href="#" class="card-title cardTitleLink">
            <h1 class="cardTitleUN">
              Some title
            </h1>
          </a>
          <p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
          </p>
          <a href="#">Continue Lendo</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
      <div class="card">
        <div class="img-container">
          <a href="#"><img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
        </div>
        <div class="card-body">
          <a href="#" class="card-title cardTitleLink">
            <h1 class="cardTitleUN">
              Some title
            </h1>
          </a>
          <p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
          </p>
          <a href="#">Continue Lendo</a>
        </div>
      </div>
    </div>

  </div>
</div>

还有笔： https ://codepen.io/magnusriga/pen/VGdxJy?editors=1100

使用object-position和属性来调整图像在其块框内object-fit的放置方式。

最终编辑：

这是一个更新的笔，对滚动条等进行了一些改进：https ://codepen.io/magnusriga/pen/VGdxJy

推荐阅读