Как поместить картинку вместо видео в CSS?

#html #css

#HTML #css

Вопрос:

В карусели есть 3 видео, в CSS я написал медиа-запрос display:none; для устройств, у которых экран меньше 600 пикселей

 @media screen and (max-width: 600px) {
  .video {
overflow: hidden;
  max-width: 100%;
  position: relative;
  vertical-align: top;
  height: 100%;
  width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
      display: none;

}

Можно ли сделать так, чтобы у кого дисплей меньше 600 пикселей видел картинку, остальные видели видео?

1. Конечно, это возможно, вы на правильном пути, просто используйте экран @media, а затем создайте другой набор изображений, которые будут отображаться, когда экран будет равен тому, что вы установили.

Ответ №1:

Да, это возможно,

Можно ли сделать так, чтобы у кого дисплей меньше 600 пикселей видел картинку, остальные видели видео?

В карусели есть 3 видео, в CSS я написал медиа-запрос display:none; для устройств, у которых экран меньше 600 пикселей

 @media screen and (max-width: 600px) {
.video {
display:none;
}
.image{
//add here your css for image
}
}

Для видео

  @media screen and (min-width: 600px) {
.video {
    //add here your css for video
}
.image{
 display:none;

}
}

Существует много способов сделать это, и выше приведен один из них

Ответ №2:

Вы можете использовать (min) и (max-width) для получения дополнительной информации вы можете проверить MDN:

@media screen and (max-width: 600px) и @media screen and (min-width: 600px)

с display:none помощью скрыть и block в этом примере показать.

 @media screen and (max-width: 600px) {
  .video {
    overflow: hidden;
    max-width: 100%;
    position: relative;
    vertical-align: top;
    height: 100%;
    width: 100%; 
    /* width: 100%; *//*<< double declaration*/
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: none;
  } /*<< missing closing .video bracket*/
  .pic {
    display: block;
  }
}

@media screen and (min-width: 600px) {
  .video {
    display: block;
  }
  .pic {
    display: none;
  }
}

 <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=650amp;w=940" alt="Picture" height="320" width="480" class="pic">

<video src="https://www.youtube.com/watch?v=dGFSjKuJfrI" class="video" controls>
  Your browser does not support the video tag.
</video>

1. что, если у меня есть несколько картинок?

2. Что вы имеете в виду? Если вы хотите, чтобы несколько изображений отображались / скрывались, просто добавьте класс.

3. Обратите внимание, что <img> в приведенном выше примере class="pic"

4. у меня есть слайдер с 4 видео, я хочу заменить видео картинками, когда пользователь приходит с мобильного устройства

5. Предпочтительно да. Поскольку, если вы нацелены на все img, это повлияет на каждую картинку в вашем html. Смотрите следующую скрипку: jsfiddle.net/ybt1pmk9 или jsfiddle.net/ybt1pmk9/embedded/result для полного размера. в нем было 4 видео и изображения