Как задать ширину изображения auto во flex?

Question

[denism300]

Есть flex блок, внутри которого квадратная картинка.

div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
img {
	height: 100%;
	width: auto;
}

Wordpress вставляет картинку со своими параметрами размеров.

<img class="alignleft size-full wp-image-9599" src="./media/basic.png" srcset="./media/basic.png 268w, ./media/basic-150x150.png 150w, ./media/basic-100x100.png 100w" sizes="(max-width: 268px) 100vw, 268px">

и, в случае, если блок, в котором картинка, больше, чем картинка, то по высоте она растягивается нормально, а свойство width: auto; не работает, т.е, картинка остается шириной не больше, чем, в данном случае, 268px.

Comments

[Виталий Першин]

А какая у вас разметка? У вас img является флекс элементом внутри флекс контейнера или обернуты во что-то?

[denism300]

Без обёртывания

<div>
  <img />
</div>

Answer 1

[Flying]

У элементов flexbox контейнера значение по-умолчанию для flex-grow равно 0, а для flex-shrink равно 1, соответственно элемент flexbox контейнера по-умолчанию сжимается, но не растягивается.

Очевидным образом это "лечится" настройкой поведения элемента flexbox контейнера под ваши нужды, в данном случае видимо ожидается flex: 1 1 auto;

Comments

[denism300]

не помогло

[Flying]

Тогда было бы хорошо выложить тестовый пример на, например, codepen.io и опубликовать ссылку. Вот пример, всё работает, так что возможно ваша реальная ситуация отличется от описанной в вопросе.