Почему flexbox растягивает мой образ?

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

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

И это таблица стилей

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

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

источник

2016-06-03 sjbuysse

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

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

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

Это растяжение, потому что align-self значение по умолчанию - stretch. Комплект align-self до center.

align-self: center

См документ здесь: align-self

источник

2016-06-03 09:07:36 pradeep1991singh

Да, но другие браузеры поддерживают соотношение сторон в изображениях. Chrome и не применяет flex-основу в img – blonfu

Большое спасибо, в этом была проблема! –

Ключ 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>

источник

2017-04-10 19:14:24 Dorian

-1

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

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

источник

2017-07-27 20:58:51 isapir

Почему flexbox растягивает мой образ?

ответ

Смежные вопросы