Ограничьте ширину изображения для изображений с портретной ориентацией / сохраните соотношение сторон

У меня настроен flexslider на адаптивном сайте. Слайдер, который я создаю, принимает изображения как в альбомной, так и в портретной ориентации. Я установил smoothHeight: true, поэтому высота регулируется в соответствии с изображениями.

При самом большом медиа-запросе контейнер flexslider имеет ширину 750 пикселей. Это нормально для изображений с альбомной ориентацией, но изображения с портретной ориентацией становятся слишком большими. Ширина портретного изображения устанавливается на тот же размер, что и контейнер - 750 пикселей в ширину, поэтому высота как минимум вдвое больше, поэтому вы не можете просматривать все изображение без прокрутки.

В css я попытался установить max-height: 750px, который решает проблему высоты, но затем flexslider растягивает изображение, чтобы оно соответствовало 750 пикселям в ширину и 750 пикселям в высоту.

Кто-нибудь знает, как заставить flexslider сохранить соотношение сторон и отрегулировать ширину изображения на основе max-height? Таким образом, портретные изображения будут иметь высоту 750 пикселей, но сохранят соотношение сторон.


jquery css flexslider
person chalky    schedule 23.10.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не понял, о какой функциональности Flexslider вы говорите - об увеличении изображения или об миниатюрах в прокручиваемой панели инструментов? Как бы то ни было, для обеих ситуаций есть одно решение:

<style>
figure {
    outline: green solid 1px;
    padding: 2px;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;

    outline: red solid 1px;
    opacity: .5;
}
.scale img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
.toheight img{
    max-width: none;
}
</style>
<figure class="scale toheight" width="200" height="200">
    <img src="http://placekitten.com/250/300"/>
</figure>

Решение для обрезки или масштабирования изображения в контейнере http://jsfiddle.net/iegik/ZzXru/

Связанный вопрос: Как выровнять обрезанный элемент по горизонтали?

person iegik    schedule 02.11.2012

arrow_upward
0
arrow_downward

Изображение должно сохранять свое соотношение по умолчанию, если у вас также не было установлено width: 100%;, и в этом случае вы должны изменить это, чтобы использовать width: auto,, тогда ваше max-height: 750px будет иметь прецедент.

person Frankie    schedule 13.08.2016
comment
Это должен быть комментарий - person Imesha Sudasingha; 13.08.2016