Масштабирование изображений в галерее

[Радосвет]

Добрый день!

 

Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров.

 

Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой".

 

У меня было желание настроить галерею более грамотно и удобно.

Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит.

У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных.

 

В оригинале выглядит вот так:

 

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 при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает).

 

Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки.

Помогите, пожалуйста, что можно добавить или изменить?

[Q4Dizzy]

С максимальной и минимальной высотой всё таки перемудрили..

[Радосвет]

С максимальной и минимальной высотой всё таки перемудрили..

Согласен 100%!

Но как это сделасть средствами CSS вообще не понимаю, всё перепробовал, то вертикальные картинки вылезают за пределы вниз (когда ширина 100%), то в браузере сафари все картинки "сплющиваются", то в бобильных устройствах бардак В принципе, и сейчас в Firefox for android галерея глючит, с чёрным фоном вместо картинок, и тд.

Возможно, как вариант, скрипт, который определял бы вертикальность картинок и масштабировал их по высоте, но боюсь, что это может не сработать в мобильных устройствах. И вообще такой способ считаю грубым, хотя и подозреваю, что галерея всё равно на скрипте работает, надо посмотреть..

[Q4Dizzy]

Галереи и работают на скриптах.. 

 

 

 

чтобы вертикальные масштабировались под высоту горизонтальных.

 

А если высоты картинок везде разные, как тогда?)))

 

Вариант, который вы хотите, что бы и высота была задана и картинки подстраивались - они будут деформироваться..