html - 裁剪列表或图像表格以适应屏幕的高度和宽度

Question

我想要一个包含 N 个图像的列表（或表格）来覆盖任何屏幕的高度和宽度，并隐藏 X 轴上每个单独图像的溢出。

鉴于这种：

<ul>
    <li><img src="/img/image.jfif"></li>
    <li><img src="/img/image.jfif"></li>
    <li><img src="/img/image.jfif"></li>
    <li><img src="/img/image.jfif"></li>
    <li><img src="/img/image.jfif"></li>
</ul>

我希望它看起来像这样：

到目前为止，我只设法使它们适合屏幕的高度或在 X 轴上裁剪它们，但不能同时使用相同的类型。这是我目前正在使用的 css：

html,body {
  height: 100%;
}

ul {
  left: -100%;
  right: -100%;
  width: 100%;
  white-space: nowrap; 
  height: 100%;
}

li {
  list-style: none; 
  height: 100%;
  overflow: hidden;
  display: inline; 
}

img {
  height:100%;
}

标签： htmlcsshtml-tablehtml-lists