Помощник
 |
|
|
|
|
Сообщение сайта
|
 Адаптивные изображения под размер модального окна, верстка |
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 -------------------- |
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс. | 63 | DaoDog | 47046 | Сегодня, 12:05 автор: Omaxis |
 |
Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ | 0 | bunneh | 327 | 16.4.2024, 18:02 автор: bunneh |
|
 Burzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ) |
2 | cryptius | 761 | 16.4.2024, 17:50 автор: cryptius |
|
Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.] Лучшие сервера по доступной цене |
32 | Hyper_Hosting | 9146 | 15.4.2024, 13:03 автор: Hyper_Hosting |
|
SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией | 20 | Needmylink1 | 7000 | 12.4.2024, 23:32 автор: Needmylink1 |
|
Текстовая версия | Сейчас: 19.4.2024, 17:36 |
