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+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2297 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3920 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3646 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1942 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 11:44
Дизайн