-2

如果我将图像源设置为 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 声明它们的来源？

编辑：不知道downvote的问题是什么......我只是想知道是否可以让图像自动裁剪，这样即使您单独更改它们的高度和宽度，它们也可以保持原来的纵横比。这在使用背景图像时完美无缺，但显然不适用于内容。不管怎样，我现在得到了答案。

4

1 回答 1

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>

于 2016-05-17T15:47:37.347 回答