0

Смотрел видеоурок Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2 с 14:00-17:50. В нем вычисляются размеры видео (в блоке на сайте) в %. Размеры видео - 600*442. Ширина блока контейнера - 1046px (если я конечно правильно понял значение этого числа - 1046px). Есть следующий класс

.whoweare__body {
  display: flex;
}

.whoweare__video {
  flex: 0 0 57%;
  position: relative;
  padding: 0px 0px 42.25% 0px;
}

.whoweare__video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.whoweare__content {
  flex: 1 1 auto;
}
<section class="page__whoweare whoweare">
  <div class="whoweare__container _container">
    <div class="whoweare__header header-block">
      <h2 class="header-block__title">Who We Are</h2>
      <div class="header-block__sub-title">
        Problems trying to resolve the conflict between the two major realms <br> of Classical physics: Newtonian mechanics
      </div>
    </div>
    <div class="whoweare__body">
      <div class="whoweare__video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ef-47vI9PDs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="whoweare__content">
        <div class="whoweare__top">
          <h2 class="whoweare__title">Most trusted in our field</h2>
          <div class="whoweare__text">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan their schedule.</div>
        </div>
        <div class="whoweare__items">
          <div class="whoweare__item item-whoweare">
            <div class="item-whoweare__icon">
              <img src="img/whoweare/icons/01.svg">
            </div>
            <div class="item-whoweare__body">
              <div class="item-whoweare__title">the quick fox jumps over the lazy dog</div>
              <div class="item-whoweare__text">Things on a very small scale ...</div>
            </div>
          </div>
          <div class="whoweare__item item-whoweare">
            <div class="item-whoweare__icon">
              <img src="img/whoweare/icons/02.svg">
            </div>
            <div class="item-whoweare__body">
              <div class="item-whoweare__title">the quick fox jumps over the lazy dog</div>
              <div class="item-whoweare__text">Things on a very small scale ...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

введите сюда описание изображения

Ширина видео в % вычисляется как calc(600/1046*100%) (flex-basis: 57%). А высота видео вычисляется как calc(442/1046*100%) (padding-bottom: 42.25%). Вот с высотой возникают 2 вопроса:

1. Почему высота равна padding?

2. Почему высота видео 442px делится на ширину контейнера 1046px, а не на высоту сайта?

Возможно я перепутал размеры объектов и расстояния между ними (если что поправьте меня, но скорее всего я не ошибся).

1046px взято с 1-ой части с 35:15. Если я ошибся, поправьте. Прилагаю макет сайта Relvise - блок Who We Are (только в макете видео не с youtube было взято). Даже не знаю как эффективно загуглить (касательно моей проблемы).

1 ответ 1

1
  1. padding === height потому, что так свёрстано. iframe идёт с position absolute, поэтому высоту надо было задавать явно, можно было бы и через height но в примере почему-то через padding-bottom
  2. собственно высота считается в процентах от ширины из-за того, что процентный паддинг считается от ширины родителя (как оказалось) документация MDN

The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block. Must be nonnegative.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.