0

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 に追加する必要がありますが、追加しません。とにかく画像を引き伸ばさないことはありますか？

私たちができるようにbackground: url("http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg") no-repeat; background-size: cover;

4

2 に答える 2

14

解決策 #1 - 新しい object-fit プロパティ (ブラウザのサポート)

object-fit: cover;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" />

この新しいプロパティの詳細については、このWeb プラットフォームの記事 を参照してください。

上記の記事から-「カバー」値に関して：

縦横比が維持されたまま、画像全体がボックスを完全に埋めるまで縮小または拡大されます。これにより、通常、画像の一部のみが表示されます。

また、ここでは、プロパティのすべての値を示す上記の記事のフィドル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" />

于 2014-10-06T13:48:48.783 に答える
2

心配しないで！これも 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%');

デモ

于 2013-07-30T09:46:44.763 に答える