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

[NOIP]

Доброго времени суток, не могу разобраться как реализовать следующее.
Есть контейнер

<div style="overflow: hidden; text-overflow: ellipsis; max-height: 400px; min-height: 400px; min-width:200px; max-width:200px;"><img src="картинка"></div>

В нем картинка 1024 на 768px. как сделать что бы в контейнере картинка отображалась не под размеры контейнера а что бы картинка отображалась вся?

 

[NightHunter]

А размеры блока, должны быть фиксированными?

 

[NOIP]

А размеры блока, должны быть фиксированными?

да.

 

[$_Maclay]

Стили для картинки чтобы отображалась вся
width:100%;
max-width:100%;

На деле

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

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

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

 

[EightShift]

А может лучше использовать картинку как фон для контейнера?
Легче будет ей управлять.
Типа:

background: url(картинка);

 

[tizor]

попробуйте `object-fit:cover`.
Для просмотра ссылки Войди или Зарегистрируйся

 

[Black#FFFFFF]

Новое попробуйте `object-fit:cover`. - сначала попробуйте caniuse и проверьте совместимость, не работает в IE. Изображение в background. И использовать background-size: cover; background-size: contain; Поиграться с background-position. Также можно в процентах поэксперементировать для разных устройств. width:100%; max-width:100%; не всегда подходит, так как картина может быть по высоте уже контейнера. Всем бобра-)

 

[dranoc]

Можно сделать как фон
background: url(картинка);
background-size: contain;