object-fit:在Bootstrap 4上不能工作？

Question

我正在尝试让一列不同大小的图像以相同的高度显示。我读过关于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时，没有区别。

提前谢谢。

Answer 1

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

​

​

<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>

​

Answer 2

定位absolute为父容器的图像创造了魔力

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