Фотогалерея responsive. Одинаковая высота картинки.

[Светлана Г.]

Здравствуйте!

Нашла вот такой пример верстки фотогалереи, подстраивающейся под разную ширину экрана.

http://themeforest.net/item/tongtiew-travel-agency-html5-responsive-template/full_screen_preview/6542247

 

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

Edited January 9, 2014 by Светлана Г.

[da4ka]

ну там вроде оригиналы картинок одинакового все размера

[Светлана Г.]

Да, точно! А если бы они были разного размера, можно сделать их одинаковой высоты?

[da4ka]

да, конечно. в цсс для #owl-slider .item img прописать высоту нужную. но поскольку там уже указана ширина 100%, то картинка будет менять пропорции. Если разбег картинок в размерах небольшой, то сойдет и как. Если нет, то можно картинкам прописать width:auto!important, max-width:100% и display:inline-block!important, а для #owl-slider .item {text-align:center}, чтоб картинка центрировалась по горизонтали

Edited January 9, 2014 by da4ka

[Светлана Г.]

Не помогло - также искажается картинка.

[da4ka]

можно на Ваш код взглянуть?

[Светлана Г.]

Вот: http://lustshop.biz/

[da4ka]

могу предложить такой вариант решения :

.col-dt-4 {float: left;position: relative;min-height: 1px;padding-right: 10px;padding-left: 10px;min-width: 180px;display: inline-block;}.sectionList img {width: auto!important;display: inline-block;max-width: 1000px!important;height: 260px;}

и еще, в хлебных крошках можно стрелку (:before) спозиционировать абсолютно, относительно ссылки, ссылке, естественно, добавить position:relative и padding-left. Тогда она не будет подчеркиваться вместе с ссылкой при наведении. Мне кажется так симпатичнее будет)

[klierik]

для responsive для картинок следует определять размеры относительно X или Y

если задаешь фиксированную высоту, то 

width: auto; max-width: 100%;

и наоборот.

[Светлана Г.]

Все равно фотки меняют пропорции.

Может есть какие-то другие решения?

[klierik]

Ну так откуда нам знать где ты допустила ошибку?

Читай в подписи как задать правильно вопрос, а там будем разбиратся что да как...

[Светлана Г.]

Вот: http://lustshop.biz/

 

Вот страница с проблемой.

Этого достаточно? 

[klierik]

да, вполне. но у всех картинок одинаковая высота...

[Светлана Г.]

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

[da4ka]

ну Вам в любом случае тогда надо убрать ширину у li

[Светлана Г.]

ну Вам в любом случае тогда надо убрать ширину у li

Тогда это уже не будет responsive.

[da4ka]

ну почему же, ведь не будет появляться прокрутки. а просто количество элементов в строке будет меньше(при уменьшении экрана)

Просто Вы хотите задать определенную ширину, определенную высоту, но хотите, чтоб не изменялись пропорции. Так нельзя)

Edited January 11, 2014 by da4ka

[Светлана Г.]

Да! И еще я хочу чтобы при этом все центрировалось.)

[klierik]

у меня при любой ширине экрана высота картинок одинаковая. что я делаю не так?