用图像填充剩余的列空间
用图像填充剩余的列空间
提问于 2020-02-01 07:13:21
你好，我正在用Bootstrap 4做一个样机。我想知道如何才能在不扭曲图像的情况下填充这个红色边框列的剩余空间？
我目前正在使用img-fluid来保持响应，但据我所知，这只填充了容器的整个宽度，因此为高度留出了空格。
<div class="row">
<div class="col-md-6">
<div class="container">
<h3>COMMAND THE ROAD</h3>
<p>The power and driving dynamics of the all-new 2020 Explorer come wrapped in an eye-catching design that
boasts
authentic comfort and style. And because it was built for the active lifestyle, you can also expect an
interior
space that accommodates the kids, the dog, the sports equipment, camping gear and just about anything else
you
may need on the road to adventure.
</p>
</div>
</div>
<div class="col-md-6">
<img src="img/20_FRD_EPR_400079_1_.jpg" class="img-fluid overflow-hidden">
</div>
</div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-01 14:23:44
经过大量的环顾和反复试验，最终解决了这个问题
img {
height:100%
}Stack Overflow用户
发布于 2020-02-01 07:39:21
您可以使用object-fit: cover调整图像大小以填充整个空间，同时保持比例不变。请记住，它会剪切图像的某些部分。如果您对图像的位置不满意，可以使用object-position对其进行更多调整
.cover {
object-fit: cover;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
img {
width: 400px;
height: 400px;
border: 10px solid red;
}<img src="https://i.picsum.photos/id/1070/5472/3648.jpg" class="cover">
<img src="https://i.picsum.photos/id/1070/5472/3648.jpg" class="fill">
<img src="https://i.picsum.photos/id/1070/5472/3648.jpg" class="contain">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60012492
复制相关文章
相似问题
腾讯云开发者
