jquery - Background-size cover to img tag

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;

}

Why background-size: cover doesn't work here. This should also be added in css3, but not added. Is there anyway not to stretch the image?

As we can do it with background: url("http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg") no-repeat; background-size: cover;

Answer 1

Solution #1 - The new object-fit property (Browser support)

Just set object-fit: cover; on the img .

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" />