html - 背景大小 :cover equivalent

Question

是否有办法“模仿”background-size:cover; 的行为？ (参见 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover )与 <img> <div> 内的标签.我想要这样的结构:

<div style="width:100%, height=30%">
    <img ng-src="{{data.imageData}}"/>
</div>

对不起，如果我对这个话题不是很清楚，我不知道如何说得更清楚。

Answer 1

解决方案

您可以使用 object-fit 和 object-position 属性来完成此操作

分别设置为cover和top left

img {
  display: block;
  width:inherit;
  height: inherit;
  object-fit: cover;
  object-position: top left;
}

这些是如何工作的

这些 CSS3 属性在 css-tricks.com 中解释如下

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

详细用法引用link1和 link2