Как сделать, адаптивную колонку с изображением?

Question

[GeorgeKay]

я честно говоря профан в вертске, и у меня есть несколько вопросов

1) Если говорить об изображении, как обычно пишут верстку, если контент динамический, картинки в такие блоки вставляются любых размеров? или говорите администратору, что допустим перед вставкой изображения, приведи его к такой то высоте и ширине?
2) если блоки начинают адаптивно перескакивать, допустим flex: wrap или медиа запрос, как сделать так, чтобы это было плавно, я видел как такие вещи как-будто анимированы, как их в общем делают, это библиотеки?

В общем если есть примеры хорошие ваши или из интернета(как их правильно загуглить, может есть сайты специальные с примерами?)

Comments

[Ankhena]

1) Если говорить об изображении, как обычно пишут верстку, если контент динамический, картинки в такие блоки вставляются любых размеров?

Для контентных:
Делают обертку, задают ей пропорции. Например, через aspect-ratio.
Картинке задают object-fit, object-position.
Если есть варианты для ретины и варианты в разных форматах (webp, avif), то используют теги picture и source.

Для фоновых:
background-size, background-position
Если картинки подготовлены, то супер. Если тяп-ляп, то и выйдет соответственно.

если блоки начинают адаптивно перескакивать, допустим flex: wrap или медиа запрос

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

Answer 1

[Михаил Р.]

1) Если говорить об изображении, как обычно пишут верстку, если контент динамический, картинки в такие блоки вставляются любых размеров? или говорите администратору, что допустим перед вставкой изображения, приведи его к такой то высоте и ширине?

CSS background-size или object-fit и заранее подготовленное изображение с нужными пропорциями.

2) если блоки начинают адаптивно перескакивать, допустим flex: wrap или медиа запрос, как сделать так, чтобы это было плавно, я видел как такие вещи как-будто анимированы, как их в общем делают, это библиотеки?

CSS transition + keyframes.

Comments

[GeorgeKay]

а нужную пропорцию я узнаю через макет? и дальше как-то указываю ее в верстке?

[Михаил Р.]

GeorgeKay,

а нужную пропорцию я узнаю через макет?

Да, либо на глаз (квадрат, широкое, высокое итп), но зависит от ТЗ.

и дальше как-то указываю ее в верстке?

Да, используя background-size/position или object-size/fit.