Изображение не во всех размерах экрана

Question

Я создаю веб-страницу и хочу показать много изображений в виде слайд-шоу. Мне удалось переключить изображения, но проблема в том, что изображения не занимают весь экран. Например, я взял два изображения одинакового размера на веб-сайте.

Это мой результат:

изображения не на всех экранах

Это мой код:

.slideshow {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 3px solid #F2F2F2;
}

.slideshow ul {
  /* 4 images donc 4 x 100% */
  width: 400%;
  height: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slideshow li {
  float: left;
}

img {
  width: 100%;
  display: block;
  border-style: none;
  height: auto;
  max-width: 100%;
  box-sizing: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow">
  <ul>
    <li><img src="./assets/image/img1.jpg" alt="" /></li>
    <li><img src="./assets/image/img2.jpg" alt="" width="350" /></li>
    <li><img src="./assets/image/img1.jpg" alt="" /></li>
    <li><img src="./assets/image/img2.jpg" alt="" /></li>
  </ul>
</div>

Answer 1

Вы можете использовать компонент Bootstrap с именем "Карусель", чтобы добавить слайд-шоу на вашу веб-страницу. Вы можете добавить этот компонент в свой код и добавить столько изображений, сколько хотите на своей веб-странице. Все они будут в одном размере. Я добавляю ссылку Bootstrap здесь: Это, безусловно, поможет вам.

https://getbootstrap.com/docs/4.4/components/carousel/

Answer 2

Это довольно неопределенный вопрос, проблема здесь в том, что размер вашего изображения более чем вероятен, но вы можете попробовать добавить width: 100vw; и / или height: 100vh; в ваше объявление img CSS.

Примечание: это всего лишь предложения, вам может не понравиться поведение области просмотра, не всем нравится. Это работает для многих моих потребностей.

Это будет выглядеть так:

img {
    width: 100vw;
    display: block;
    border-style: none;
    height: 100vh;
    box-sizing: inherit;
 }

Это не будет работать в некоторых старых браузерах, но вот пара статей, которые могут помочь вам :

https://css-tricks.com/fun-viewport-units/

https://tipue.com/blog/css3-vw-vh/