ul li图像填补div

Question

我有一个包含2列的页面。第一列是30%的宽度，第二列是70%，其中包含幻灯片放映的缩略图。这是第二栏：

我希望缩略图填满屏幕，因为你可以在底部将部分省略。

这就是我所拥有的

<div class="wrapper">
 <ul class="rig">
  <li>Image 1</li>
  <li>Image 2</li>
  <li>Image 3</li>
  <li>Image 4</li>
  <li>Image 5</li>
  <li>Image 6</li>
  <li>Image 7</li>
  <li>Image 8</li>
  <li>Image 9</li>
 </ul>
</div>

.wrapper {
    max-height: inherit;
    max-width: inherit;
}

.rig {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    list-style: none;
    max-height: 100%;
   }

.rig li {
    display: inline-block;
    width:33.33%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

我想要的是缩略图填充屏幕而没有红色部分。 有没有办法指定li元素的高度？ 基本上，我希望宽度为33.33%，高度为其父容器的33.33%。我不想以像素为单位指定它......

Answer 1

问题已经解决。谢谢您的帮助 。使用height: calc(100vh / 3);

解决