`background-size` CSS 属性 不适用于 html <image> 标签

Question

如果我将图像源设置为 CSS background-image 属性，它工作正常，但如果我通过 HTML 设置图像源，它会完全中断。为什么？

.image1 {
  height: 100px;
  width: 100px;
  background-size: cover;
}

.image2 {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}

<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>

<img class="image2"></img>

无论 width/height 组合如何，为了让这些图像正确显示，我是否必须声明它们来自 CSS？

---

edit：不确定投反对票的问题是什么...我只是想知道是否可以让图像自动裁剪以保持其原始外观即使你独立地改变它们的高度和宽度。这在使用背景图像时完美无缺，但显然不适用于内容。不管怎样，我现在得到了答案。

Answer 1

在 IE 以外的浏览器上，您可以使用 object-fit: cover 而不是 background-size。

.image1 {
  height: 100px;
  width: 100px;
  object-fit: cover;
}

.image2 {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}

<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>

<img class="image2"></img>