Question

此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;：

我可以在id width上更改图像的#imgUNcover，但是在不同的重新扫描屏幕中无法解决问题。

编辑：

Answer 1

苏西，我要走到这里，只是猜测你在找什么。让我知道您是否需要其他结果，我会调整答案

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

一些有趣的注意事项（以防您想更深入地学习）：

您不必在图像元素上同时设置高度和宽度
这样做是个好习惯，但这不是必需的
原因是未设置尺寸的计算值默认为 auto 。相应地，该属性的使用值等于：used value of other dimension / intrinsic image ratio
实际上，这意味着您未设置的高度或宽度会发生变化，因此元素的内容框的大小应等于内容框的长宽比< / em>将与图片的固有长宽比相同

因此，更改object-fit无效，除非将其置于none（none：图像将保留其固有尺寸，而图像的内容框仍然是您设置的内容）

在这种情况下，我们要使用％值，以在卡片大小更改（响应度）时启用大小调整。

然后我们必须确保容器块具有该特定尺寸集

如果未设置（默认情况下为 auto ），则其大小将等于其内容的大小。

这将导致无法解决的循环引用：孩子想成为其父母身高的一个百分比，而父母的身高则试图等于其子女（ren）

在这种情况下，您在内容框上设置的百分比将默认为 auto

这意味着它会像根本没有设置一样

如果未设置高度/宽度，则内容框的高度/宽度使用值设置为等于图像的固有高度/宽度

因此，内容框很可能会很大（除非图像很小），并且容器会溢出（请参见overflow属性）

最后，object-fit仅在图像的固有长宽比不同于您在元素的内容框上设置的尺寸（高度/宽度）
时适用

闭幕致：

Pheeew，有很多注释，但是希望对解释内联替换元素的高度/宽度如何起作用有帮助

可在此处找到各种元素的高度/宽度的CSS2.1规范：10 Visual formatting model details
可以在这里找到{li>的
MDN文章：MDN object-fit

代码：

object-fit

#imgUNcover { width: 100%; object-fit: contain; }

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

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

要确保所有图像的高度相同，请在卡片上设置特定的高度，然后使用 flexbox 的{将其分布在卡片的图像区域（顶部）和主体部分上{1}}属性。为避免 flex项超出其 flex容器的范围，只需使用<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>，它会告诉 block box 添加滚动条，

修改Bootstrap功能的乏味部分是，要检查的因素要比直接自己构建要多得多。很多时候，您必须放入flex-basis以否决其描述符。

新代码：

overflow: auto

!important

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

使用.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

如何在Boostrap 4的图像卡上贴上适合物体的适合覆盖物？

1 个答案: