Отображение фотографий, картинок разного размера в одном блоке?

Question

[Сергей Громов]

К примеру есть блок 300px на 200px. как в таким блоке правильно отображать картинки разного размера
к примеру с HD картинками все понятно max-width: 100% height: auto; и тебе счастье, но как же быть с квадратными картинками, или с размеро 200х500

Особенно интересен 3 и 4 вариант, как же правильно его выровнять, вот пример
https://jsbin.com/bunafiqijo/edit?html,css,output

Answer 1

[Neyury]

Если картинка это фон, то
background-size: cover;

Если картинка как img, то
object-fit: cover;

Эти свойства сделают так, что бы картинка всегда заполняла блок, она сделает это либо по высоте, либо по ширине, в зависимости от того, что меньше

Comments

[Neyury]

Подробнее:
https://webref.ru/css/object-fit
https://webref.ru/layout/html5-css3/background/size

[Сергей Громов]

Спасибо, только работает когда ШИРИНА И ВЫСОТА явно указаны а не auto

[bro-dev]

Как вообще можно подобное предлагать object-fit, не работает в ие.

Answer 2

[quramolt]

Могу предложить вариант с изменением для тэга img в вашей вёрстке height:100% и добавлением width:100%;
Ссылка на JSbin

Но понятно, что таким образом, картинки будут масштабироваться соот-м образом. Возможно, вы этого и хотите?

Comments

[Сергей Громов]

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

[quramolt]

Тогда мне не очень понятно, как вы, например, собираетесь читабельно вписывать картинку 100х500 в контейнер 500х500? Или вы о чём-то другом говорите?

[Сергей Громов]

именно об этом, вот мне тоже не совсем понятно, но другие вписывают, вот я и хочу узнать как

[quramolt]

Можно пример, как другие вписывают?

Answer 3

[bro-dev]

Это не реализовать средствами html+css. только одна зависимость либо от высоты либо от ширины, если нужно сохранять пропорции. Пишите скрипты.

Comments

[Сергей Громов]

все реально, object-fit: cover; гуглите

[bro-dev]

reskwer: Ни Edge ни IE не поддерживает. Когда я говорю не реализовать я имею ввиду для реальных проектов.

[Николай]

Роман Бережнов: реальные проекты давно игнорируют IE

[bro-dev]

Николай: Вы не знаете о чем говорите, не поддерживать ИЕ = потерять 7% клиентов с сайта на пустом месте.

[Николай]

Роман Бережнов: ну не 7, а в районе 3 (по статистике LiveInternet). К тому же эти они явно не целевая аудитория реальных проектов.