html - автоматически сопоставить ширину с вышеуказанным элементом

Question

В этом примере размер элемента main может быть изменен (теперь это 240x320, определяемое css). Я sh элемент controls всегда соответствует ширине main. возможно ли это сделать с помощью css или нужно изменить это значение с javascript?

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  width: 240px;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <video class="video" id="main" autoplay></video>
  <div id="controls" class="icon">
    <ion-icon class="keys" id="home" name="home"></ion-icon>
    <ion-icon class="keys" id="power" name="power"></ion-icon>
    <ion-icon class="keys" id="menu" name="menu"></ion-icon>
    <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
    <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Выход:

Answer 1

Добавьте дополнительную обертку, и это будет легко

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  width: 240px;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
  display:block; /*added this to remove white space*/
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <div>
    <video class="video" id="main" autoplay></video>
    <div id="controls" class="icon">
      <ion-icon class="keys" id="home" name="home"></ion-icon>
      <ion-icon class="keys" id="power" name="power"></ion-icon>
      <ion-icon class="keys" id="menu" name="menu"></ion-icon>
      <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
      <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
    </div>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Answer 2

Есть несколько способов, которыми CSS может сделать это. Один из способов - сделать контейнер с центральным экраном фиксированной ширины и добавить margin: 0 auto, чтобы он оставался по центру. Удалите фиксированную ширину из видеоэлемента.

Затем удалите свойство align-items, поскольку по умолчанию используется растяжение и то, что вам нужно.

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  max-width: 240px;
  margin: 0 auto;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

Вот скрипка

Answer 3

Я бы обернул видео и элементы управления в div, установил ширину этого нового div в соответствии с любой шириной значения пикселя, которую вы хотите, и чтобы внутренние элементы (видео и элементы управления) имели ширину 100%.

псевдоразметка:

  <style> 
    .wrapper { width : 240px; }
     video, .controls { width: 100%; }
    </style>

    <div class="wrapper">
        <video>
        <div class="controls>
    <div>

Answer 4

Вы можете сделать это следующим образом: добавить размеры на экран .center, а затем масштабировать видео и элементы управления относительно него. В зависимости от структуры вашего фактического контента, это может отличаться, но мы не можем сказать, пока вы не показываете нам:)

body {
  background-color: #f5e0e0;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 240px;
  height: 320px;
  margin: auto;
}

.video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
  width: 100%;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <video class="video" id="main" autoplay></video>
  <div id="controls" class="icon">
    <ion-icon class="keys" id="home" name="home"></ion-icon>
    <ion-icon class="keys" id="power" name="power"></ion-icon>
    <ion-icon class="keys" id="menu" name="menu"></ion-icon>
    <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
    <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>