Радосвет
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Радосвет
-
-
Добрый день!
Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров.
Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой".
У меня было желание настроить галерею более грамотно и удобно.
Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит.
У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных.
В оригинале выглядит вот так:
http://demo.megathe.me/heat/portfolio/people/
Код стиля:
/* =iosSlider----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;}.iosSlider .slider .item img { width: 100%; height: auto; float: left;}
На моём сайте вот так:
http://www.radosvet.ru/portfolio/margarita-portret/
Код я немного изменил, добавив max-height: 600px:
/* =iosSlider max-height: 600px;----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}
В итоге вроде получилось то что мне нужно, но проблема в том, что при уменьшении окна вертикльные кадры "обрезаются" снизу.
Я ещё дописал, добавив min-height: 600px;:
----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px; min-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px; min-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px; min-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}
Теперь почти всё так, как мне нравится. Но параметр максимальной высоты не позволяет адаптивному дизайну быть на 100% рабочим.
Например, при сужении окна по высоте картинка на экран не помещается.
А в мобильных браузерах вообще всё как-то странно смотрится В Firefox android при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает).
Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки.
Помогите, пожалуйста, что можно добавить или изменить?
-
Сделал в программе Camtasia Studio видео, назвал "kontakt_razdel".Делал файл поставив галочку: MP4-Flash/HTML5 player.Сделало папку с файлами как выше писал.Она делает видео сразу в HTML5.Получилась папка kontakt_razdel, в ней :Папка scripts со скриптами,папка skins,видео: kontakt_razdel.mp4файлы:kontakt_razdel_config.xmlkontakt_razdel_controller.swfkontakt_razdel.htmlkontakt_razdel_embed.csskontakt_razdel_First_Frame.pngkontakt_razdel_player.htmlplayerProductInstall.swfХочу на фон сайта сделать видео. Куда и как прописать надо?Просто модулем выводил видео для просмотра, без проблем.А на фон не могу понять как в HTML5 вывести. Прописать просто видео в блоке делал.Но здесь папки, файлы а не один видео файл.Куда и как прописать надо?Спасибо.
Масштабирование изображений в галерее
in HTML Coding
Posted
Согласен 100%!
Но как это сделасть средствами CSS вообще не понимаю, всё перепробовал, то вертикальные картинки вылезают за пределы вниз (когда ширина 100%), то в браузере сафари все картинки "сплющиваются", то в бобильных устройствах бардак В принципе, и сейчас в Firefox for android галерея глючит, с чёрным фоном вместо картинок, и тд.
Возможно, как вариант, скрипт, который определял бы вертикальность картинок и масштабировал их по высоте, но боюсь, что это может не сработать в мобильных устройствах. И вообще такой способ считаю грубым, хотя и подозреваю, что галерея всё равно на скрипте работает, надо посмотреть..