Помощник
 |
|
|
|
|
Сообщение сайта
|
 Адаптивные изображения под размер модального окна, верстка |
Fiasko
|
Сообщение
#1
|
||
|
Новичок  Группа: Viewer Сообщений: 12 Регистрация: 16.10.2010 Поблагодарили: 1 раз Репутация:  0 
 |
|
||
 |
|
||
WoWeb
|
 26.7.2017, 17:22;
Ответить: WoWeb
Сообщение
#2
|
 Завсегдатай Группа: Active User Сообщений: 803 Регистрация: 18.8.2015 Поблагодарили: 321 раз Репутация: 60
|
Цитата(Fiasko @ 26.7.2017, 17:12)  p.s. Модальное окно располагаю по центру экрана с помощью js-а, беру ширину и высоту экрана, отнимаю высоту и ширину нашего модального окна, делю наполовину и получаю отступы top и left соответственно. Почему бы просто через css не прописать модельному окну: Код .mini_zoom_wrapp{ position:fixed; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); width:свой размер, можно в % height:auto; } .mini_zoom_wrapp > a{ display:block; } .mini_zoom_wrapp img{ width:100%; height:auto; display:block; } -------------------- |
|
|
|
|
Fiasko
|
Сообщение
#3
|
|
Новичок Группа: Viewer Сообщений: 12 Регистрация: 16.10.2010 Поблагодарили: 1 раз Репутация: 0
|
WoWeb, спасибо за совет! Но тогда не будет возможности к примеру к данному блоку применить например css3 анимации с использованием transform и другими значениями.
К примеру если взять из библиотеки animate.css эффект bounceInDown или bounceoutDown который использует в своей анимации transform:translate3d(значения). Может быть по этому вопросу есть также какие-то советы как совместить? P.s. И эти блоки повторюсь которые описаны выше и к которым вы написали стили не относятся к модальному окну (это просто 3 подряд картинки в ссылках на свои картинки большого размера),я понял что вы имеете ввиду. Вы предлагаете модальному окну задать позиционирование через transform. Сообщение отредактировал Fiasko - 26.7.2017, 17:31 |
|
|
|
|
WoWeb
|
26.7.2017, 17:32;
Ответить: WoWeb
Сообщение
#4
|
|
|
Завсегдатай Группа: Active User Сообщений: 803 Регистрация: 18.8.2015 Поблагодарили: 321 раз Репутация: 60
|
Цитата(Fiasko @ 26.7.2017, 17:29) К примеру если взять из библиотеки animate.css эффект bounceInDown или bounceoutDown который использует в своей анимации transform:translate3d(значения). Может быть по этому вопросу есть также какие-то советы как совместить? Ну можно перед анимацией на лету оборачивать контейнер через .wrap() и ему уже задавать translate3d. Возможно нужно будет сделать между действиями мизерный таймаут в 100ms Да и вроде можно добавлять translate3d таким образом transform: translateX(-50%) translateY(-50%) translate3d(10px,0px,0px);
Сообщение отредактировал WoWeb - 26.7.2017, 17:36 -------------------- |
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
 Burzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ) |
3 | cryptius | 883 | Сегодня, 14:47 автор: cryptius |
|
Жирные бурж ссылки под крипту Размещаем статьи на популярных международных сайтах |
0 | umexa | 354 | 23.4.2024, 23:23 автор: umexa |
|
SEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш |
3 | Needmylink1 | 1039 | 23.4.2024, 21:26 автор: Needmylink1 |
|
SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией | 21 | Needmylink1 | 7189 | 23.4.2024, 21:16 автор: Needmylink1 |
 |
Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс. | 63 | DaoDog | 47512 | 19.4.2024, 12:05 автор: Omaxis |
|
Текстовая версия | Сейчас: 25.4.2024, 19:59 |
