web-dev-qa-db-ja.com

background-sizeに相当するものはありますか？

私はたくさんのページと異なる背景画像のあるサイトを持っています、そして私は以下のようにCSSからそれらを表示します：

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

ただし、<img>要素を使用して1つのページに異なる（フルスクリーン）画像を表示し、それらの画像に上記のbackground-image: cover;プロパティと同じプロパティを設定したい（画像はCSSから表示できず、HTML文書から表示する必要があります） 。

通常私は使用します：

div.mydiv img {
    width: 100%;
}

または

div.mydiv img {
    width: auto;
}

絵をいっぱいにして敏感にするために。しかし、画面が狭くなり過ぎると画像が縮小しすぎ（width: 100%）、本体の背景色が下部の画面に表示されます。もう1つのメソッドwidth: auto;は、画像をフルサイズにするだけで、画面サイズには反応しません。

background-size: coverと同じ方法で画像を表示する方法はありますか？

htmlcssimagecss3
186
stormpat

解決策1 - object-fitプロパティ （ Lacks IE support ）

Imgにobject-fit: cover;を設定するだけです。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />

object-fit: coverについては、 MDN - を参照してください。

置換されたコンテンツは、要素のコンテンツボックス全体を埋めながら、縦横比を維持するサイズになります。オブジェクトの縦横比がそのボックスの縦横比と一致しない場合、オブジェクトは収まるように切り取られます。

また、 このCodepenデモ を参照してください。これは、画像に適用されたobject-fit: coverを背景画像に適用されたbackground-size: coverと比較します

解決策2 - imgをcssの背景画像に置き換える

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}
<img src="http://placehold.it/1500x1000" />
305
Danield

実際にはかなり単純な css解 があり、これはIE8でも動作します。

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}
<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>
27
Simon

あなたがあなたが満たすことを望むコンテナ要素を持つように手配することができると仮定すると、これはうまくいくように見えますが、少しハッキングを感じます。本質的に、私はmin/max-width/heightをより大きな領域に使用してから、その領域を元の寸法に拡大縮小します。

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
20
Ulrich Schwarz

いいえ、background-size:coverのようにすることはできませんが、..

このアプローチはかなり密接に関係しています。画像を横長か縦長かを判断するためにJavaScriptを使用し、それに応じてスタイルを適用します。

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

9
roo2

私はcoverとcontainsの両方をエミュレートするための簡単な解決策を見つけました。それは純粋なCSSで、動的な寸法を持つコンテナのために働きます、そしてまた画像比率に制限を加えません。

もしあなたがIEや16以前のEdgeをサポートする必要がないのであれば、object-fitを使うほうが良いでしょう。

背景サイズ：表紙

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}
<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

画像の自然サイズが表示されているサイズよりも大きい場合は、1000％がここで使用されます。たとえば、画像が500 x 500だがコンテナは200 x 200しかない場合。このソリューションでは、（min-width/min-heightのために）画像は2000 x 2000にサイズ変更され、（transform: scale(0.1)のために）200 x 200に縮小されます。

X 10の要素はx 100またはx 1000に置き換えることができますが、2000 x 2000のイメージを20 x 20のdivにレンダリングするのは通常理想的ではありません。 :)

背景サイズ：含む

同じ原則に従って、これを使ってbackground-size: containをエミュレートすることもできます。

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}
<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
6
Thiago Barcala

私はbackground-size: containをエミュレートする必要がありましたが、サポートがないためにobject-fitを使うことができませんでした。私の画像は定義された寸法のコンテナを持っていました、そしてこれは私のために働いてしまいました：

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>
2
Gus

できることは、 'style'属性を使用して背景画像を要素に追加することです。そうすれば、引き続きHTMLで画像を呼び出すことになりますが、background-size：cover cssの動作を引き続き使用できます。

HTML：

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS：

    .image-div{
    background-size: cover;
    }

これが、HTMLに動的にロードする必要がある要素にbackground-size：cover動作を追加する方法です。これでb​​ackground-position：centerのような素晴らしいCSSクラスを使うことができます。ブーム

2
Charlie Tupman

min-heightを指定して、bothmin-widthとdisplay:blockを設定してみてください。

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

（ フィドル ）

画像の包含要素がposition:relativeまたはposition:absoluteである場合、その画像はコンテナを覆います。ただし、中心にはなりません。

水平方向（set margin-left:-50%）または垂直方向（set margin-top:-50%）にオーバーフローするかどうかがわかっていれば、画像を簡単に中央揃えにできます。それを理解するためにCSSメディアクエリ（およびいくつかの数学）を使用することは可能かもしれません。

2
Jeremy

CSSを使えばobject-fit: [cover|contain];をシミュレートできます。 transformと[max|min]-[width|height]を使います。 これは完璧ではありません。あるケースではうまくいきません。画像がコンテナよりも広くて短い場合。

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>
1
mems

私はこれが古いことを知っています、しかし私が上で見た多くの解決策は実際には背景サイズのカバーのように振る舞っていないのでコンテナに対して大きすぎるイメージ/ビデオに関する問題を抱えています。しかし、私はそれが画像やビデオのために働くように "ユーティリティクラス"を作ることにしました。あなたは単にコンテナにクラス.media-cover-wrapperを与え、メディアアイテム自体にクラス.media-coverを与えるだけです。

その後、次のjQueryがあります。

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

それを呼び出すときには、ページのサイズ変更に注意してください。

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

その後、次のCSS：

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

ええ、それはjQueryを必要とするかもしれませんがそれは非常によく反応し、まさにbackground-size：coverのように振る舞いますそしてあなたはその余分なSEO価値を得るために画像やビデオでそれを使うことができます。

0
Secular12

ZOOMアプローチをとることができます。アスペクトイメージの高さOR widthが目的の高さOR widthよりも小さい場合、最大30％（または最大100％）がズーム効果になると想定できます。残りの不要な領域はオーバーフローで隠すことができます：hidden。

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

これは異なる幅OR高さの画像を調整します。

0
Rehmat

IEの場合は、2行目も含める必要があります。

.mydiv img {
    max-width: 100%;
    width: 100%;
}
0
фымышонок

「コメントを追加する」ことはできませんが、そうすることで、Eru Penkmanが行ったことはほとんどその場で行われます。

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

に

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}
0
Asim Ramay