Масштабирование изображения, как (на подобие background-size:cover)?

Question

[reactreact]

Есть <div><img src="" alt=""></div>
div 100х100 пикселей, а картинка может быть любого размера, например 1024х768 пикселей. Можно ли как-то сделать так, чтобы картинка занимала весь этот блок без искажений, примерно как background-size:cover или background-size:contain?

Comments

[reactreact]

Максим Зайцев: тем, что картинка в src будет меняться при помощи javascript. Менять src проще и как мне кажется правильнее в данном случае.

Answer 1

[Сергей delphinpro]

есть свойство object-fit, но у него плохая поддержка браузерами на данный момент.
Я в таких случаях использую фоновое изображение.
Если размеры дива известны - то тут все просто, просто задаем фон

<div style="background-image:url(image.jpg)"></div>

а в css заданы остальные параметры фона, в том числе background-size
Если размеры дива по одному из измерений зависят от изображения, то можно оставить картинку внутри, сделав ее полностью прозрачной (div img {opacity: 0}), а с фоном провернуть ту же штуку, что в предыдущем примере.

Answer 2

[trushka]

О! Можно попытаться сделать min-width: 100%; min-height: 100%; width: 10px; (аналог cover)
А если contain - то наоборот, max-width: 100%; max-height: 100%; width: 1000px;