Адаптивная картинка во flexboxe?

Question

[art style]

Хочу вставить картинку с сохранением aspect ratio
картинка 1920х5000(пример) я хочу просто выставить допустим ширину 500 а высота должна подобраться автоматом...
как это сделать
1. беком у дива
2. стилями у img
?

Comments

[Шохрух Шаймардонов]

Ну вообще указывайте размер нужной стороны, а вторую не трогайте, автоматически подберется.

Answer 1

[Ankhena]

Не удобно оставлять картинку самостоятельно болтаться во флексбоксе, оберните ее во что-нибудь, в div или figure.

Если оборачивать не хочется, то flex-shrink и align-self в помощь.
И не трогайте высоту.

Comments

[art style]

у меня так
div
-div
--text
-div
--img

что лучше картинка беком или картинка Imgом
картинка imgом зависит от размеров флекса который автоматом не выставляется

[Ankhena]

art style,

что лучше картинка беком или картинка Imgом

Если картинка имеет смысл, т.е. если она исчезнет (вместе с css), то смысл потеряется, то это img.
Если картинка это украшение кнопки, блока и т.д., то это фон или псевдоэлемент.

Например, изображение товара в магазине - всегда контентное.
Иконки соц.сетей - это украшение ссылок на соц.сети (фон, псевдоэлемент или svg(use)).
Если в кнопке/ссылке визуально ничего нет кроме иконки, то нужно вставить спан с текстом и доступно его скрыть (гуглить "паттерн visually-hidden")

картинка imgом зависит от размеров флекса который автоматом не выставляется

Кто не выставляется автоматом? Флекс? Ну да, странно...
Вы бы как-то пояснили свою мысль.

[art style]

Ankhena, мысль такая:
я хочу задать картинке конкретно img размер допустим 500px а высоту подбирать автоматом.
картинка лежит в div а тот еще в одном div-flex

[Ankhena]

art style, и что не выходит? Или точнее где ваш код в песочнице, где видно, что у вас не выходит?

[art style]

Ankhena, да бред.. все получилось. делал все тоже самое...

Answer 2

[historydev]

background-size: 500px auto;