Я пытаюсь продублировать что-то вроде того, что показано на видео. У меня есть 2 блока div. Один содержит случайное изображение, а другой - видео, и я пытаюсь сделать их гибкими и идентичными, как ...

0
dotaplayer 10 Апр 2021 в 01:03

2 ответа

Лучший ответ

Итак, я сделал максимальную ширину 900 для демонстрации на codepen, теперь вы можете настроить их.

.container {
  max-width: 900px;
  display: flex;
  justify-content: center;
}

.image {
  width: 100%;
}


.item {width:50%}
@media screen and (max-width: 768px) {
  .container {
   display:block;
  }
.item {width:100%}

}
  <div class="container">
 <div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
<div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
  </div>
0
flakerimi 9 Апр 2021 в 22:33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
       <div class="image"> <img src="./myimage.png"></img> </div>
       <div class="video"> <video src="./videoplayback.mp4"></video> </div>

    </div>
  
    <script src="script.js"></script>
  </body>
</html>

Я настроил HTML, как вы описали, и css выглядит следующим образом:

.container {
  /* max-width: 1400px; */
   width: 90vw;
  display: flex;
  justify-content: center;
}

.image   {
  /* height: 45vh;
  width: 70vh; */
  width: 50%;
}

.image img  {
  /* height: 45vh;
  width: 70vh; */
  width: 100%;
}


.video  {
  /* height: 45vh;
  width: 70vh; */
  width:50%
}


.video video {
  /* height: 45vh;
  width: 70vh; */
  width:100%
}


@media screen and (max-width: 768px) {
  .container { 
    display: block ;
  } */

}

Объяснение:

Установите ширину контейнера равной 90% ширины области просмотра, а затем задайте 50% ширины разделам изображения и видео (в данном случае это будет 50% от его родительского элемента или этих 90%). В медиа-запросе просто установите отображение контейнера на block. Я действительно не знал, какой должна быть высота изображения или видео, поэтому оставил это на ваше усмотрение.

0
Haroon Azhar Khan 9 Апр 2021 в 22:58