Блог

Я хочу иметь список (или таблицу) из 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%;
}