时间戳

首页 > 解决方案 > object-fit：覆盖在 Bootstrap 4 上不起作用？

css - object-fit：覆盖在 Bootstrap 4 上不起作用？

问题描述

我试图让一列不同大小的图像以相同的高度出现。我读过关于object-fit. 我似乎无法让它工作。

jsfiddle

这是我当前的代码：

<div class="row">
    <div class="col-4 p-0">
        <a href="#" target="_blank"><img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" class="img-fluid" data-wow-delay="0s" style="object-fit: cover !important; min-height: 100%"></a>
    </div>
    <div class="col-4 p-0">
        <a href="#" target="_blank"><img src="https://www.w3schools.com/css/paris.jpg" alt="" class="img-fluid" data-wow-delay="0.2s" style="object-fit: cover !important; min-height: 100%"></a>
    </div>
</div>

当我删除 object-fit 时，没有区别。

提前致谢。

标签： cssbootstrap-4

解决方案

我已经调试了你的代码。这将确保图像在浏览器调整大小时不会变得很大，并且图像也会响应。

在此处输入图像描述

<div class="col-4 p-0">
 <a href="#" target="_blank" style="display: block; height: 100%; width: 100%;">
 <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" style="display: 
 block; 
 height: 100%; width: 100%;">
 </a>
</div>

这会为您提供所需的结果，因为由于object-fit某种原因无法正常工作（可能是由于图像之间的纵横比差异。）

<div class="row d-flex">
  <div class="col-4 p-0">
  <a href="#" target="_blank" style="display: block; height: 100%; width: 100%;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" style="display: block; height: 100%; width: 100%;">
  </a>
  </div>
  
  <div class="col-4 p-0"><a href="#" target="_blank" style="display: block; height: 100%; width: 100%;"><img src="https://www.w3schools.com/css/paris.jpg" alt="" style="display: block; height: 100%; width: 100%;"></a></div>

推荐阅读