Question

我正在尝试构建一个以图像为中心的页面，其中所有图像在固定大小的容器内灵活调整大小。容器分为两排;第一个是三个4个间隔的列，每个列都有一个图像（跟随引导），第二行是一个12个间隔的列，填充一个图像。

理想情况下，我希望他们显示此行为： - 如果它们比容器宽，我希望图像的大小和居中，直到图像边框在高度或宽度方向与容器相遇。任何相应的溢出效应都将被切断。

溢出已经将它们切断了; align-self应该以它们为中心;物体贴合覆盖图像;但是我不知道如何让它像我上面描述的那样表现。

非常感谢您阅读了这篇文章，如果您愿意帮助我，请多谢谢^^

代码：

＆＃13;

.img-responsive {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  align-self: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.col-4 {
  min-height: 20px;
  max-height: 300px;
  padding: 0;
  overflow: hidden;
}

.col-12 {
  min-height: 150px;
  max-height: 300px;
  padding: 0;
  overflow: hidden;
}

＆＃13;

<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://vietnamtravel.guide/wp-content/uploads/2015/04/Banh-Mi-Vietnam.jpg" );>
      </div>
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://s.iha.com/00125194526/Hanoi-municipality-Street-market-in-hanoi.jpeg" );>
      </div>
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://i.pinimg.com/736x/da/86/35/da863581a7524e3260b6ba75a8b08cdb--vietnamese-iced-coffee-coffee-latte.jpg" );>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 hoveropacity">
        <img class="img-responsive" src="https://www.vietnamtravelblog.info/wp-content/uploads/2011/05/Vietnam.jpg" );>
      </div>
    </div>
  </div>
</section>

＆＃13;

注意：我确实四处寻找已经给出的答案，但我找不到适合我的答案。请原谅我的任何疏忽。

Answer 1

解决！感谢@Kangouroops

加

object-fit: contain;
width: 100%;
height: 100%;

如何在一组容器中调整不同大小的图像CSS

1 个答案: