Как правильно задать размеры для IMG если заранее не известны размеры картинки?

Question

[Emptyform]

Предположим есть у нас галерея картинок построенная на блоках, которая часто обновляется. И вне зависимости от реальных размеров картинок нужно сделать:
1) чтобы верстка не ломалась - т.е. сохранялись размеры блоков
2) не искажались пропорции картинок

И это при условии что картинки могут оказаться произвольных размеров и пропорции могут совершенно не соответствовать предполагаемым.

Если верстать картинки через background-image - проблем нет - применяем background-size: cover или contain (на вкус) и все хорошо.
Но верстать контентные картинки через бэкграунд очень нехорошо, за такое нужно пожизненно дисквалифицировать.

Вопрос - как верстать картинку посредством тега <img> и при этом ничего не ломалось?

зы. фотошоп не предлагать

Answer 1

[WQP]

img {
    max-width: 100%;
    height: auto;
    display: block;
}

или

img {
    width: 100%;
    height: auto;
    display: block;
}

Answer 2

[iBird Rose]

Но верстать контентные картинки через бэкграунд очень нехорошо

смотря как. я к примеру в ситуациях когда реально стилизовать img уже никак не получается - делаю так:
в блоке ставлю < img > и задаю ему display: none; а потом через js беру атрибут src у этого img и вставляю его бэкраундом для блока. тобишь структура остается такой же, но при этом картинка стоит через bg - и можно стилизовать как нужно.

Comments

[Emptyform]

Хм.. А как это влияет на SEO?

[iBird Rose]

Emptyform: в том то и дело все остается также на своих местах. у тебя в DOM как была картинка в блоке - так и остается.

[Emptyform]

iBird Rose: прикольно))

Answer 3

[Павел Радьков]

object-fit для нормальных браузеров.
и полифилл для IE/Edge https://github.com/bfred-it/object-fit-images/

caniuse.com/#feat=object-fit

Answer 4

[Алекс Глебов]

Сделать обрезку картинок под нужный размер в cms - самый лучший вариант

или object-fit: contain или cover;

или выравнивать по центру маленькую картинку

или пишем в атрибуте style background-image, почему нет? на натяжку верстки это не влияет. у бг и картинки разные возможности для стилизации, иногда нужно именно бг.

Comments

[Emptyform]

background-image и img для поисковика совершенно разные вещи

[Emptyform]

Хмм.. хотя, наверно можно картинку воткнуть и как img и как фон, а img потом сделать невидимым и SEO не пострадает ))