Background-size cover to img tag

Question

html

        
                      

              相关标签:
       
      

Answer 1

Don't worry! You can do this too using jQuery!

var imgSrc=$('div img').attr('src');

$('div img').remove();
$('div').html('<div class="backbg"></div>');
$('.backbg').css('background-image', 'url(' + imgSrc + ')');
$('.backbg').css('background-repeat','no-repeat');
$('.backbg').css('background-size','cover');
$('.backbg').css('width','100%');
$('.backbg').css('height','100%');

demo

Answer 2

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

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

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