Почему flexbox растягивает мое изображение, а не сохраняет пропорции?

158

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

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

Развернуть фрагмент

Что вызывает это?

Я добавил этот CodePen, чтобы продемонстрировать, что я имею в виду.

html css flexbox

— sjbuysse
источник

5

В Firefox и IE отлично работает. В Chrome вы можете исправить с align-self:flex-start помощью изображения. Я не знаю почему, может быть значение по умолчанию в Chrome - растянуть.

2

Также добавляем высоту: 100%; чтобы img исправил проблему, я хотел бы знать, почему он также растягивает изображение.

— Paran0a

3

@blonfu, значением по умолчанию во всех браузерах является align-items: stretch/ align-self: stretch. Если вы добавите рамку вокруг каждого элемента и удалите его wrap, вы заметите, что все элементы растягиваются во всех браузерах: codepen.io/anon/pen/oLXBVx?editors=1100

— Майкл Бенджамин,

Хорошо. Я изучаю это, но с изображениями по-разному работает в Chrome и других браузерах. Chrome не учитывает соотношение сторон, если вы не определяете высоту.

@blonfu, да. Несомненно, есть несоответствия браузера и более детальные уровни.

— Майкл Бенджамин

367

Это растягивается, потому что align-selfзначение по умолчанию stretch. Установите align-selfв center.

align-self: center;

Смотрите документацию здесь: align-self

— pradeep1991singh
источник

Да, но другой браузер поддерживает соотношение сторон в изображениях. Chrome также не применяет flex-

9

Я думаю, что align-self: start;может быть более сильный ответ, потому что изображения должны выровняться по вертикали к вершине своих контейнеров (не по центру), как любое безлицензионное изображение (без CSS). В любом случае, оба ответа исправляют растяжение. Так что, конечно, это зависит от того, чего хочет ОП - просто не получил это «вертикально центрированное» впечатление от поста ОП.

— жаба

Если вы не определили ширину изображения и оно находится во flex-контейнере, оно растянется до 100%. align-self: [flex-start, center...others]будет препятствовать тому, чтобы изображение приняло 100% ширины flex-контейнеров. align-self:centerисправляет это, конечно, но если вы хотите, чтобы ваше изображение начиналось с начала или конца использования контейнераalign-items: flex-start or flex-end

— cacoder

1

Вы также можете положить align-items: center (или любое другое выравнивание по своему усмотрению) на родителя.

— электровир

16

Ключевой атрибут align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

Развернуть фрагмент

— Дориан
источник

1

Я столкнулся с той же проблемой с меню Foundation. align-self: center;не работал для меня

Мое решение состояло в том, чтобы обернуть изображение <div style="display: inline-table;">...</div>

— isapir
источник

2

Это о flexbox, хотя.

Это является решением для Flexbox. Изображение и div находятся внутри контейнера flexbox.

— Исапир

0

Добавление `margin`для выравнивания изображений:

Поскольку мы хотели, imageчтобы это было left-aligned, мы добавили:

img {
  margin-right: auto;
}

Точно так же, imageчтобы быть right-aligned, мы можем добавитьmargin-right: auto; . Фрагмент показывает демонстрацию для обоих типов выравнивания.

Удачи...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

Развернуть фрагмент

— Акаша
источник

0

Он растягивается, потому что значением по умолчанию для align-self является растяжение. для этого случая есть два решения: 1. установить img align-self: center ИЛИ 2. установить родительские align-items: center

img {

   выровнять себя: центр
}

ИЛИ

.parent {
  align-items: center
}

— Мохамед Али
источник

Почему flexbox растягивает мое изображение, а не сохраняет пропорции?

Добавление marginдля выравнивания изображений:

Добавление `margin`для выравнивания изображений: