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, чтобы продемонстрировать, что я имею в виду.
align-self:flex-start
помощью изображения. Я не знаю почему, может быть значение по умолчанию в Chrome - растянуть.align-items: stretch
/align-self: stretch
. Если вы добавите рамку вокруг каждого элемента и удалите егоwrap
, вы заметите, что все элементы растягиваются во всех браузерах: codepen.io/anon/pen/oLXBVx?editors=1100Ответы:
Это растягивается, потому что
align-self
значение по умолчаниюstretch
. Установитеalign-self
вcenter
.Смотрите документацию здесь: align-self
источник
align-self: start;
может быть более сильный ответ, потому что изображения должны выровняться по вертикали к вершине своих контейнеров (не по центру), как любое безлицензионное изображение (без CSS). В любом случае, оба ответа исправляют растяжение. Так что, конечно, это зависит от того, чего хочет ОП - просто не получил это «вертикально центрированное» впечатление от поста ОП.align-self: [flex-start, center...others]
будет препятствовать тому, чтобы изображение приняло 100% ширины flex-контейнеров.align-self:center
исправляет это, конечно, но если вы хотите, чтобы ваше изображение начиналось с начала или конца использования контейнераalign-items: flex-start or flex-end
align-items: center
(или любое другое выравнивание по своему усмотрению) на родителя.Ключевой атрибут
align-self: center
:источник
Я столкнулся с той же проблемой с меню Foundation.
align-self: center;
не работал для меняМое решение состояло в том, чтобы обернуть изображение
<div style="display: inline-table;">...</div>
источник
Добавление
margin
для выравнивания изображений:Поскольку мы хотели,
image
чтобы это былоleft-aligned
, мы добавили:Точно так же,
image
чтобы бытьright-aligned
, мы можем добавитьmargin-right: auto;
. Фрагмент показывает демонстрацию для обоих типов выравнивания.Удачи...
источник
Он растягивается, потому что значением по умолчанию для align-self является растяжение. для этого случая есть два решения: 1. установить img align-self: center ИЛИ 2. установить родительские align-items: center
ИЛИ
источник