'background-size'CSS属性不适用于html标签

Question

如果我将图像源设置为CSSbackground 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>

为了让这些图像正确显示，不管宽度/高度组合如何，我是否必须从CSS声明它们的来源？

编辑：不确定反对票的问题是什么...我只是想知道是否有可能让图像自动裁剪，这样即使你独立地改变它们的高度和宽度，它们也能保持原始的方面比例。当使用背景图像时，这是完美的，但显然不是内容。不管怎样，我现在得到了答案。

Answer 1

在IE以外的浏览器上，您可以使用对象匹配：cover而不是背景大小。

.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>