-
Обсуждения
-
Смотрел видеоурок с 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, а не на высоту сайта? -
Ответ спустя 5 лет, но всё же. Просто transition перенести в .shadow. Я сейчас с похожей проблемой парюсь, только у меня там родственные селекторы и transition работает как таймер, но нету плавного затухания -
By ket-verbitskaya · Posted
Блоку с фоновым изображением задать свойство relative. Блоку, наложенному поверх изображения задать свойство absolute. И плюсую к верхнему комменту, что фоновое изображение лучше задавать через url в background-image. -
By ket-verbitskaya · Posted
Привет! Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них. Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX <div class="wrapper"> <div class="circle"> <div class="panel panel--1"> </div> <div class="panel panel--2"> </div> <div class="panel panel--3"> </div> <div class="panel panel--4"> </div> <div class="circle--2"> </div> </div> </div> * { box-sizing: border-box; } body { background-color: #2b2b2b; } .wrapper { background-color: #2b2b2b; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { height: 29vw; width: 29vw; border-radius: 50%; position: absolute; transform: rotateZ(25deg); background-color: #333333; } .panel { height: 17.5vw; width: 17.5vw; border-radius: 50%; border: 1.5vw solid #f14100; } .panel--1 { float: left; position: absolute; } .panel--2 { float: right; position: relative; } .panel--3 { bottom: 0; position: absolute; } .panel--4 { bottom: 0; right: 0; position: absolute; } .circle--2 { border: 1.5vw solid #f14100; position: relative; border-radius: 50%; height: 25vw; width: 25vw; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); outline: 10vw solid #2b2b2b; } -
-
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.