Bootstrap HTML-约束图像的堆栈要查看

Question

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

我想根据所有图像的高度保持整个建筑物的观察

任何帮助将不胜感激。

https://jsfiddle.net/j_diddley/dvktj5df/

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