it-roy-ru.com

Поддерживать пропорции изображения при изменении высоты

С помощью гибкой блочной модели 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;
}
105
coderMe

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

Используя этот факт, если вы поместите каждый тег img в тег div и установите его ширину равной 100% родительского тега div, высота будет соответствовать желаемому соотношению сторон.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}
60
Muhammad Umer

Чтобы предотвратить растягивание изображений по любой оси внутри гибкого родителя, я нашел пару решений.

Вы можете попробовать использовать подгонку объекта к изображению, которое, например,.

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

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

align-self: center;
flex: 0 0 auto;
55
Matty Balaam

Нет необходимости добавлять содержащий div.

По умолчанию для свойства css "align-items" установлено значение "stretch", из-за которого ваши изображения растягиваются до полной первоначальной высоты. Установка свойства css "align-items" в значение "flex-start" решает вашу проблему.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}
44
Marvin Herbold

Большинство изображений с внутренними размерами , то есть натурального размера, как jpeg изображение. Если указанный размер определяет как ширину, так и высоту, пропущенное значение определяется с использованием внутреннего отношения ... - см. MDN .

Но это не сработает так, как ожидалось, если изображения, которые задаются как прямые изгибаемые элементы с текущим насколько я знаю, модуль Flexible Box Layout Module Level 1 .

Смотрите эти обсуждения и сообщения об ошибках могут быть связаны:

  • Flexbugs # 14 - Внутренние размеры Chrome/Flexbox не реализованы правильно.
  • Firefox Bug 972595 - Контейнеры Flex должны использовать "flex-based" вместо "width" для вычисления собственной ширины элементов Flex
  • Chromium Issue 249112 - В Flexbox разрешите собственные пропорции, чтобы сообщать расчет основного размера.

В качестве обходного пути вы можете заключить каждый <img> в <div> или <span>, или около того.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}
<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Предполагаемый минимальный размер элементов Flex

Чтобы обеспечить более разумный минимальный размер по умолчанию для flex items , в данной спецификации вводится новое значение auto в качестве начального значения min-width и min-height свойства, определенные в CSS 2.1.


Кроме того, вместо этого вы можете использовать CSS table layout, который даст результаты, аналогичные flexbox, он будет работать в большем количестве браузеров, даже для IE8.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}
<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>
33
Stickers

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

Если реальная ширина зависит от гибкой системы. Поэтому после того, как ширина элементов достигает максимальной ширины родительского элемента, дополнительная ширина, заданная в css, игнорируется. Тогда безопасно установить ширину на 100%.

Так как высота тега img является производной от самого изображения, то установка высоты в 0% может что-то сделать. (это то, где мне неясно, что ... но для меня имело смысл это исправить)

DEMO

(помните, сначала увидел это здесь!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Работает только в chrome пока

5
Muhammad Umer