如何让img里的图片自适应div，并填充不变形？

Question

<div>
    <img src="..." alt="image">
<div>

img如何随父元素div改变尺寸，填充整个img，并且不变形？
就是background-size: cover;的感觉。

或者保持不变形，只显示图片的一部分也可以？

谢谢大家。

Answer 1

img标签在固定高宽的div里的显示，除了JS，以及背景图片，可以试一下使用css属性object-fit属性。
它的几个属性

fill（不保持纵横比缩放图片，使图片完全适应）
contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
none（保持图片宽高不变）
scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）
inherit
initial
unset

Answer 2

设置 img width 或者 height 100%
另一个不设置，img 会按比例缩放

Answer 3

object-fit:cover;
全兼容方案

Answer 4

将图片设置为div的 background, 并设置背景的位置为div的正中，然后设置背景的大小为 cover.

div.img {
    background: url("path/to/img") no-repeat center;
    background-size: cover;
}

Answer 5

我的方法是保证图片是 100% 占满，然后用放大展示，放大的程度应该按需要设定

<div>
    <img src="..." alt="image">
<div>

.div {
  width:200px;
  height:100px;
  overflow:hidden;
}
.div img {
  width:100%;
  height:100%;
  transform: scale(1.5);
}