Div, images, auto width, auto height?

Question

[Outoverlay]

<div class="pictures">
        <div class="icon"><img src="vv.png"></div>
</div>

.icon {
    max-width: 400px;
    max-height: 200px;
    display: inline-block;
}
.pictures img {
    width: 100%;
    height: 100%;
}

И все бы норм, но картинка расползается и изменяется, до не узнаваемости.
Можно заменить в img {
max-width: 100%;
max-height: 100%;
}
Но тогда картинка не заполнит весь блок.
Если не преобразовать, тогда картинка расползется за пределы div.
Можно как-то сделать так, чтобы картинка расползалась но за пределы блока не выходила?

Answer 1

[Outoverlay]

Вот решение:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Answer 2

[Сергей Тутуков]

.pictures img {
max-width: 400px;
max-height: 200px;
}

Comments

[Outoverlay]

Представьте блок 400x200.
Теперь представьте images 1000x1000
Теперь представьте, что div, этой картинке ползает за направлением мышки,
и отображает тот момент на картинке на который вы навели указатель.

Так вот мне надо получить это соотношение.
Если бы я использовал background в css за место images.
То картинка бы не сжималась, но заполнила бы div целиком,
То есть я бы видел картинку, но только ее часть

[Outoverlay]

background: url('vv.png');
background-size: cover;
Вот этот результат мне нужен

[Outoverlay]

но через img src

[Сергей Тутуков]

webonrails.ru/post/549877453451956300

[Сергей Тутуков]

Только не кроссбраузерно
caniuse.com/#feat=object-fit

[Outoverlay]

sftutukov: я 20 мин назад уже ответ нашел.

[Outoverlay]

sftutukov: но все равно спасибо