css - ul li图片以填充div

我有一个包含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%。我不想以像素为单位指定它...

最佳答案

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

关于css - ul li图片以填充div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40465749/