X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как заставить видео и картинку масштабироваться пропорционально?
foxer
foxer
Topic Starter сообщение 23.6.2016, 12:42; Ответить: foxer
Сообщение #1


Здравствуйте!

Такая проблема: Есть сайт где на фоне сверху лежит видео, сразу под ним лежит картинка, которая является продолжением видео, имеет такую же изначальную ширину (1920) и должна совпадать с видео пиксель в пиксель, чтоб не было понятно, где оно заканчивается и начинается статическая картинка. Ещё нужно, чтоб они не сужались при уменьшении окна, а центрировались (на видео в центре есть объект, который всегда должен оставаться в центре). Этого достигнуть я пытаюсь с помощью "object-fit: cover" на <video> и на <img> и все хорошо пока ширина окна не начинает превышать 1920рх , тогда они начинают увеличиваться не пропорционально и видео начинает перекрывать картинку. Как бы сделать так чтоб они вели себя синхронно при любом ресайзе (хотя бы до 3000px) и вообще возможно ли это?

И ещё, можно ли это осуществить с помощью bsckground-image вместо тэга img? Пробовал задавать фоновой картинке background-size: cover, но резайзится она всё равно не синхронно с видео, на котором object-fit: cover.

http://codepen.io/foxer1/pen/XKNaRe

Заранее спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 28.6.2016, 10:44; Ответить: Degradator
Сообщение #2


Плохо понимаю что у тебя не получается, для меня это звучит как - надо синхронно растянуть два прямоугольника. Если так, то скорее всего тебе нужны
min-width
max-width
min-height
max-height
background-position: center; (background-position: center center;)
background-size: 100%; (background-size: 100% 100%;)

скорее всего не понадобятся
width
height
Потому что задав эти свойства ты лешишь твои теги возможности растягиваться.
Ну и также почитай про @media-query
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxer
foxer
Topic Starter сообщение 28.6.2016, 13:37; Ответить: foxer
Сообщение #3


Да я пробовал играться с этими свойствами по всякому, но дело в чем: при сужении, когда экран становится меньше 1920рх, картинка бэкграунд начинает просто сужаться в то время как видео, благодаря свойству object-fit:cover обрезается по краям и центрируется. соответсвенно фон из под видео уезжает. При растяжении на более чем 1920 всё норм. Сдается мне это вообще невозможно сделать через background-image((

http://codepen.io/foxer1/pen/OXbYrj?editors=1100
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 28.6.2016, 19:12; Ответить: Degradator
Сообщение #4


Блин, ну это же не так делается
<div class="background">
<div class="video"></div>
</div>

[CSS].background: {
background: url('../images/background.jpg') no-repeat;
background-size: 100%;
}[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxer
foxer
Topic Starter сообщение 29.6.2016, 11:47; Ответить: foxer
Сообщение #5


(Degradator @ 28.6.2016, 21:12) *
Блин, ну это же не так делается
<div class="background">
<div class="video"></div>
</div>

[CSS].background: {
background: url('../images/background.jpg') no-repeat;
background-size: 100%;
}[/CSS]


так я уже пробовал, не работает... Не совпадает картинка с видео

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как защитить сайт от выкачивания?
Защитить сайт на голом хтмл
1 PostBrigada 37 Сегодня, 0:08
автор: prolisk
Открытая тема (нет новых ответов) Как улучшить ПФ на обычном статейнике?
12 Kiloan_Frost 904 Вчера, 23:31
автор: pe0ple
Горячая тема (нет новых ответов) ВНИМАНИЕ: Как самостоятельно продвинуть сайт? Научу!
консультации в домашних условиях :)
267 GlazAlmaz 197308 Вчера, 20:10
автор: Shurin
Горячая тема (нет новых ответов) ВНИМАНИЕ: Новогодний ВИДЕО конкурс 2020-2021, заявим о MaulTalk.com на YouTube
57 jack 3627 Вчера, 20:07
автор: jack
Открытая тема (нет новых ответов) Как вычислить проблемного исполнителя на этапе заказа?
8 metvekot 336 Вчера, 10:19
автор: _fan_


 



RSS Текстовая версия Сейчас: 19.1.2021, 0:24
Дизайн