Как с помощью модели гибкого бокса CSS заставить изображение сохранять свое соотношение сторон?
JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/
Обратите внимание, что изображения растягиваются или сжимаются, чтобы заполнить ширину контейнера. Это нормально, но можно ли растянуть или уменьшить высоту, чтобы сохранить пропорции изображения?
HTML
<div class="slider">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>
CSS
.slider {
display: flex;
}
.slider img {
margin: 0 5px;
}
<div>
с CSSbackground-image: url(...);background-size:contain; background-repeat:no-repeat
Ответы:
Для тегов img, если вы определяете одну сторону, размер другой стороны будет изменен, чтобы сохранить соотношение сторон, и по умолчанию изображения расширяются до своего исходного размера.
Используя этот факт, если вы оберните каждый тег img в тег div и установите его ширину на 100% от родительского div, тогда высота будет соответствовать соотношению сторон, как вы хотели.
http://jsfiddle.net/0o5tpbxg/
источник
Чтобы изображения не растягивались по любой оси внутри гибкого родителя, я нашел несколько решений.
Вы можете попробовать использовать подгонку объекта к изображению, например
http://jsfiddle.net/ykw3sfjd/
Или вы можете добавить правила гибкости, которые в некоторых случаях могут работать лучше.
источник
object-fit: contain;
помогло мне, когда у меня была проблема только в хроме, ff было в порядке.Нет необходимости добавлять содержащий div.
По умолчанию для свойства css "align-items" установлено значение "stretch", которое заставляет ваши изображения растягиваться до полной исходной высоты. Установка свойства css "align-items" на "flex-start" устраняет вашу проблему.
источник
Но, насколько мне известно , это не работает должным образом, если изображения устанавливаются как элементы прямой гибкости с текущим модулем макета гибкой коробки уровня 1 .
Просмотрите эти обсуждения, и отчеты об ошибках могут быть связаны:
В качестве обходного пути вы можете обернуть каждый символ
<img>
a<div>
или a<span>
или около того.jsFiddle
В качестве альтернативы вы можете использовать
table
вместо этого макет CSS , который вы получите аналогичные результаты, посколькуflexbox
он будет работать в большем количестве браузеров, даже для IE8.jsFiddle
источник
.slider > div{min-width:0}
в новых браузерах, поддерживающихmin-width: auto
.auto
значение в качестве значения по умолчанию дляmin-width
иmin-height
(ранее было0
). Chrome еще не реализует его, поэтому ваш первый фрагмент работает. Но новым браузерам это необходимо для того, чтобы гибкие элементы могли уменьшаться меньше, чем ширина изображений по умолчанию.В последнее время я играл с flexbox, и я пришел к решению этой проблемы путем экспериментов и следующих рассуждений. Однако на самом деле я не уверен, что происходит именно так.
Если на реальную ширину влияет гибкая система. Таким образом, после того, как ширина элементов достигает максимальной ширины родительского элемента, дополнительная ширина, установленная в css, игнорируется. Тогда безопасно установить ширину на 100%.
Поскольку высота тега img зависит от самого изображения, установка высоты на 0% может кое-что сделать. (здесь я не понимаю, что ... но для меня имело смысл исправить это)
DEMO
(помните, что впервые увидел это здесь!)
Работает пока только в хроме
источник
auto
". Вот что происходит в Firefox.Это ожидаемое поведение. flex-контейнер по умолчанию растягивает всех своих дочерних элементов. Изображение не исключение. (т.е. у родителя будет
align-items: stretch
собственность)Чтобы сохранить соотношение сторон, есть два решения:
align-items: stretch
свойство по умолчанию наalign-items: flex-start
илиalign-self: center
т.д., http://jsfiddle.net/e394Lqnt/3/или
align-self: center
илиalign-self: flex-start
т. Д. Http://jsfiddle.net/e394Lqnt/2/источник
На самом деле я обнаружил, что контейнер тега изображения должен иметь высоту, чтобы сохранить пропорции изображения. например>
тогда в вашем html ваш контейнер обернет изображение тега
эта работа для IE и других браузеров
источник
У меня была такая же проблема. Используйте выравнивание гибкости, чтобы центрировать элементы. Вам нужно использовать
align-items: center
вместоalign-content: center
. Это сохранит соотношение сторон, в то время как align-content не сохранит соотношение сторон.источник