Jump to content

vladdvin

Neophyte
  • Posts

    2
  • Joined

  • Last visited

Information

  • Sex
    не скажу

vladdvin's Achievements

Explorer

Explorer (1/14)

  • Conversation Starter Rare

Recent Badges

0

Reputation

  1. Смотрел видеоурок с 14:00-17:50 В нем вычисляются размеры видео в %. Размеры видео - 600*442. Ширина блока контейнера - 1046px (если я конечно правильно понял значение этого числа - 1046px). Есть следующий класс <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> .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; } Скриншот блока страницы https://i.stack.imgur.com/mAizr.png Ширина видео в % вычисляется как calc(600/1046*100%) (flex-basis: 57%). А высота видео вычисляется как calc(442/1046*100%) (padding-bottom: 42.25%). Вот с высотой возникают 2 вопроса: 1. Почему высота равна padding? 2. Почему высота видео 442px делится на ширину контейнера 1046px, а не на высоту сайта?
  2. Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал CSS В результате отображается следующая картинка в режиме инструментов разработчика. А вне режима вообще отображает Подскажите как добиться отображения текста как на макете.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy