Задать вопрос
reskwer
@reskwer
front-end developer
javascript

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

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

Особенно интересен 3 и 4 вариант, как же правильно его выровнять, вот пример
https://jsbin.com/bunafiqijo/edit?html,css,output
  • Вопрос задан
  • 1067 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@Neyury
Если картинка это фон, то
background-size: cover;

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

Эти свойства сделают так, что бы картинка всегда заполняла блок, она сделает это либо по высоте, либо по ширине, в зависимости от того, что меньше
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
@quramolt
Могу предложить вариант с изменением для тэга img в вашей вёрстке height:100% и добавлением width:100%;
Ссылка на JSbin

Но понятно, что таким образом, картинки будут масштабироваться соот-м образом. Возможно, вы этого и хотите?
Ответ написан
4 комментария
4 комментария
xPomaHx
@xPomaHx
1vs9
Это не реализовать средствами html+css. только одна зависимость либо от высоты либо от ширины, если нужно сохранять пропорции. Пишите скрипты.
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать запись в файл на ubuntu
27 дек. 2024, в 03:33
1500 руб./за проект
Сделать анимацию и отрисовать иллюстрации
27 дек. 2024, в 02:41
50000 руб./за проект
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Ещё заказы