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

Question

[Emptyform]

Если, скажем нужно расположить произвольное количество картинок с неизвестными заранее пропорциями и более того, пропорции будут гарантированно разными. А сетка естественно с фиксированными размерами ячеек.
Как при этом сделать чтобы картинки отображались без искажения пропорций? И при этом соблюсти правило чтобы у тега обязательно были указаны атрибуты шиины и высоты.

Я сам тут пару дней помучался, но нормально получается только если атрибуты шиины и высоты не указывать а задать в CSS max-width , max-height. Но тут получается, что страница не валидна.

Answer 1

[Виктор Виктор]

атрибуты-атрибутами, но никто не мешает в стилях задать ширину и высоту

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

так она будет растягиваться на всю ширину контейнера, но не искажаться по высоте

Или по высоте она тоже должна подгоняться?

Answer 2

[MetaDone]

положите картинки в div фиксированной ширины
и у картинок

img{
max-width:100%;
}

Comments

[Emptyform]

MetaDone вот так чтоли? => cssdeck.com/labs/xf3jpjf8

[MetaDone]

Emptyform: width="200" height="200" уберите у img

[MetaDone]

Emptyform: а чтоб точно влезло в такую рамку - обрезайте на сервере

[Emptyform]

MetaDone: отсутствие атрибутов width & height тормозит загрузку контента страницы, расположенного после, вплоть до полной загрузки картинки

[MetaDone]

Emptyform: тогда решение очевидно - обрезайте на сервере и вставляйте эти атрибуты

Answer 3

[mr_dev1l]

object-fit:cover решит все ваши проблемы

Comments

[Emptyform]

mr_dev1l лет через пяток, пожалуй: caniuse.com/#search=object-fit