Question

我很难搞清楚如何做到这一点。我觉得我有多个想法，但我不确定什么是正确的或者从什么开始。

我希望根据所有图像的高度将整个建筑物保持在视野中，以便所有图像都能同等地调整大小以保持在视口内。

任何帮助都将不胜感激。

.building {
  text-align: center;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="building">
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
  <div class="floor">
    <img src="http://placehold.it/120x80" class="img-fluid img-floor">
  </div>
</div>

Answer 1

这是一个想法......你有6个楼层，对吧？ 100/6 = 16.6666。地板是120x80，即高1.5倍。 16.6666 x 1.5 = 25.数学。

.floor{
  max-height: 16.66vh;
}
.floor img {
  height: 100%;
  width: 25vh;
}

https://jsfiddle.net/dvktj5df/1/

Bootstrap HTML - 限制图像堆栈查看

1 个答案: