Emptyform
@Emptyform

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

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

Я сам тут пару дней помучался, но нормально получается только если атрибуты шиины и высоты не указывать а задать в CSS max-width , max-height. Но тут получается, что страница не валидна.
  • Вопрос задан
  • 431 просмотр
Решения вопроса 1
toptalo
@toptalo
undefined
атрибуты-атрибутами, но никто не мешает в стилях задать ширину и высоту

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


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

Или по высоте она тоже должна подгоняться?
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
MetaDone
@MetaDone
Хорошо сформулированный вопрос - 50% решения
положите картинки в div фиксированной ширины
и у картинок
img{
max-width:100%;
}
Ответ написан
mr_dev1l
@mr_dev1l
Технический верстальщик
object-fit:cover решит все ваши проблемы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы