jquery - img 标签的背景大小封面

Question

html

<div>
<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />
</div>

CSS

div{
    width: 200px;
    height: 100px;
    background-color: red;
}
img{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;

}

为什么 background-size: cover 在这里不起作用。这个在css3中应该也加了，但是没有加。无论如何不拉伸(stretch)图像？

我们可以用 background: url("http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg") no-repeat;背景大小:覆盖；

Answer 1

解决方案 #1 - 新的 object-fit 属性 ( Browser support )

只需在 img 上设置 object-fit: cover; 即可。

img {
  display: block;
  width: 200px;
  height: 100px;
  object-fit: cover;
}

<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />

您可以在 webplatform article 中阅读有关此新属性的更多信息.

从上面的文章 - 关于“封面”值:

The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible.

还有，这里是a fiddle来自上面的文章，它演示了 object-fit 属性的所有值。

解决方案 #2 - 将 img 替换为带有 css 的背景图片

img {
  position: relative;
  width: 0;
  height: 0;
  padding: 50px 100px;
  background: url(http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg) no-repeat;
  background-size: cover;
}

<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />