如何在 Bootstrap 4 的图像卡上放置响应式对象适合的封面？
How to put a responsive Object fit cover, on the image Card from the Boostrap 4?
这个css从Boostrap 4中取出了卡片的响应式布局。我怎样才能在卡片的图像上放置一个object-fit: cover;，并从[=中获得响应式布局43=] 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 #imgUNcover 上图像的 width，但它不会解决不同分辨率屏幕上的问题。
编辑：
Susi，我要在这里冒险，猜猜你在找什么。如果您需要其他结果，请告诉我，我会调整答案
为了使图像根据其 包含块 的大小调整大小，您可以在高度或宽度上放置一个百分比值。请在下面找到代码示例。
一些有趣的笔记（如果您想更深入地研究）：
- 您不必在图像元素上同时设置高度 和 宽度
- 这样做是个好习惯，但没有必要
- 原因是没有设置维度的计算值，默认为auto。反过来，导致已用值 属性 等于：
used value of other dimension / intrinsic image ratio
- 实际上，这意味着您未设置的高度或宽度会发生变化，因此元素的 内容框 的大小会使得 内容框将与图像的固有纵横比相同
- 因此，更改
object-fit 将无效，除非您将其设置为 none（none：图像将保持其固有尺寸，而其 内容框保持你设置的内容）
- 在这种情况下，我们要使用 % 值，以便在卡片大小发生变化（响应能力）时启用调整大小
- 然后我们必须确保容器块具有特定的维度集
- 如果未设置（默认为自动），其大小将等于其内容的大小
- 这将导致无法解决的循环引用：子项希望成为其父项大小的百分比，而父项的大小试图等于其子项 (ren)
- 在这种情况下，您在 内容框 上设置的百分比将默认为 自动
- 这意味着它会像根本没有设置一样
- 如果未设置 height/width，内容框的height/width使用值设置为等于图像height/width的固有值
- 因此，内容框很可能会很大（除非图像很小），并溢出其容器（参见overflow 属性）
- 最后，
object-fit 仅在图像的固有纵横比与您在元素的 内容框 上设置的尺寸 (height/width) 不同时适用=122=]
结束语：
- 哎呀，很多注释，但希望这对解释内联替换元素的高度/宽度如何工作有帮助
- 可在此处找到各种元素的高度/宽度的 CSS2.1 规范：10 Visual formatting model details
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[=119 将其分布在卡片的图像区域（顶部）和正文部分=]的flex-basis属性。为避免 flex 项目 在其 flex 容器 之外生长，只需使用 overflow: auto，它告诉 block box 必要时添加滚动条。
修改 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
这个css从Boostrap 4中取出了卡片的响应式布局。我怎样才能在卡片的图像上放置一个object-fit: cover;，并从[=中获得响应式布局43=] 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 #imgUNcover 上图像的 width，但它不会解决不同分辨率屏幕上的问题。
编辑：
Susi，我要在这里冒险，猜猜你在找什么。如果您需要其他结果，请告诉我，我会调整答案
为了使图像根据其 包含块 的大小调整大小，您可以在高度或宽度上放置一个百分比值。请在下面找到代码示例。
一些有趣的笔记（如果您想更深入地研究）：
- 您不必在图像元素上同时设置高度 和 宽度
- 这样做是个好习惯，但没有必要
- 原因是没有设置维度的计算值，默认为auto。反过来，导致已用值 属性 等于：
used value of other dimension / intrinsic image ratio - 实际上，这意味着您未设置的高度或宽度会发生变化，因此元素的 内容框 的大小会使得 内容框将与图像的固有纵横比相同
- 因此，更改
object-fit将无效，除非您将其设置为none（none：图像将保持其固有尺寸，而其 内容框保持你设置的内容） - 在这种情况下，我们要使用 % 值，以便在卡片大小发生变化（响应能力）时启用调整大小
- 然后我们必须确保容器块具有特定的维度集
- 如果未设置（默认为自动），其大小将等于其内容的大小
- 这将导致无法解决的循环引用：子项希望成为其父项大小的百分比，而父项的大小试图等于其子项 (ren)
- 在这种情况下，您在 内容框 上设置的百分比将默认为 自动
- 这意味着它会像根本没有设置一样
- 如果未设置 height/width，内容框的height/width使用值设置为等于图像height/width的固有值
- 因此，内容框很可能会很大（除非图像很小），并溢出其容器（参见overflow 属性）
- 最后，
object-fit仅在图像的固有纵横比与您在元素的 内容框 上设置的尺寸 (height/width) 不同时适用=122=]
结束语：
- 哎呀，很多注释，但希望这对解释内联替换元素的高度/宽度如何工作有帮助
- 可在此处找到各种元素的高度/宽度的 CSS2.1 规范：10 Visual formatting model details
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[=119 将其分布在卡片的图像区域（顶部）和正文部分=]的flex-basis属性。为避免 flex 项目 在其 flex 容器 之外生长，只需使用 overflow: auto，它告诉 block box 必要时添加滚动条。
修改 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