Полная картинка в контейнере

NOIP

Гуру форума
Регистрация
17 Фев 2008
Сообщения
327
Реакции
77
Доброго времени суток, не могу разобраться как реализовать следующее.
Есть контейнер
HTML:
<div style="overflow: hidden; text-overflow: ellipsis; max-height: 400px; min-height: 400px; min-width:200px; max-width:200px;"><img src="картинка"></div>
В нем картинка 1024 на 768px. как сделать что бы в контейнере картинка отображалась не под размеры контейнера а что бы картинка отображалась вся?
 
А размеры блока, должны быть фиксированными?
 
Стили для картинки чтобы отображалась вся
width:100%;
max-width:100%;

На деле

<img style="width:100%; max-width:100%;" src="картинка">

Если нужно по высоте растянуть, добавляем высоту

<img style="width:100%; max-width:100%; height:100%;" src="картинка">
 
Последнее редактирование:
А может лучше использовать картинку как фон для контейнера?
Легче будет ей управлять.
Типа:
Код:
background: url(картинка);
 
Новое попробуйте `object-fit:cover`. - сначала попробуйте caniuse и проверьте совместимость, не работает в IE. Изображение в background. И использовать background-size: cover; background-size: contain; Поиграться с background-position. Также можно в процентах поэксперементировать для разных устройств. width:100%; max-width:100%; не всегда подходит, так как картина может быть по высоте уже контейнера. Всем бобра-)
 
Можно сделать как фон
background: url(картинка);
background-size: contain;
 
Назад
Сверху