Background-size cover to img tag

Question

html

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;
}

You can read more about this new property in this webplatform article.

From the above article - regarding the 'cover' value:

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.

Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.

Solution #2 - Replace the img with a background image with 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;
}