javascript - 背景サイズをシミュレート:カバーオン

Question

background-size:coverまたはのような html 要素の機能をシミュレートするにはどうすればよいです<video>か<img>?

私はそれが次のように動作することを望みます

background-size: cover;
background-position: center center;

score 186 · Accepted Answer

これは私がしばらく頭を悩ませていたものですが、スクリプトを使用せず、5 行の CSS (セレクターとブラケットを数えると 9 行) でビデオの完璧なカバーシミュレーションを実現できる優れたソリューションに出会いました。）。これには、CSS3-compatibility を除いて、完全に機能しないエッジケースはありません。

ここで例を見ることができます（アーカイブされています）

ティモシーのソリューションの問題は、スケーリングが正しく処理されないことです。周囲の要素がビデオファイルより小さい場合、縮小されません。ビデオタグに 16 ピクセル x 9 ピクセルのような小さな初期サイズを指定しても、最終auto的にはネイティブファイルサイズの最小値に強制されます。このページで現在最も多く投票されているソリューションでは、ビデオファイルを縮小して劇的なズーム効果を得ることができませんでした。

ただし、16:9 など、ビデオの縦横比がわかっている場合は、次の操作を実行できます。

.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

動画の親要素がページ全体をカバーするように設定されている場合 ( などposition: fixed; width: 100%; height: 100vh;)、動画も同様です。

ビデオも中央に配置したい場合は、確実な中央揃えアプローチを使用できます。

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

もちろん、vw、vh、およびtransformは CSS3 であるため、はるかに古いブラウザとの互換性が必要な場合は、スクリプトを使用する必要があります。

score 137 · Accepted Answer

jsフィドル

画像には背景カバーを使用しても問題ありません。幅 100% も同様です。これらはには最適ではなく<video>、これらの答えは非常に複雑です。全幅のビデオ背景を作成するのに、jQuery や JavaScript は必要ありません。

私のコードは、カバーのようにビデオで背景を完全にカバーするわけではありませんが、代わりに、アスペクト比を維持し、背景全体をカバーするのに必要なだけビデオを大きくすることに注意してください。余分なビデオはページの端からにじみますが、どちらの辺がビデオを固定するかによって異なります。

答えは非常に簡単です。

このHTML5ビデオコード、または次の行に沿ったものを使用してください：（フルページでテスト）

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

min-height と min-width により、ビデオはビデオの縦横比を維持できます。これは通常、通常のブラウザの通常の解像度での縦横比です。余分なビデオは、ページの端からはみ出します。

score 43 · Accepted Answer

これが私がこれをした方法です。実際の例は、この jsFiddleにあります。

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

  vid_w_orig = parseInt(jQuery('video').attr('width'));
  vid_h_orig = parseInt(jQuery('video').attr('height'));
  $('#debug').append("<p>DOM loaded</p>");

  jQuery(window).resize(function () { resizeToCover(); });
  jQuery(window).trigger('resize');
});

function resizeToCover() {
  // set the video viewport to the window size
  jQuery('#video-viewport').width(jQuery(window).width());
  jQuery('#video-viewport').height(jQuery(window).height());

  // use largest scale factor of horizontal/vertical
  var scale_h = jQuery(window).width() / vid_w_orig;
  var scale_v = jQuery(window).height() / vid_h_orig;
  var scale = scale_h > scale_v ? scale_h : scale_v;

  // don't allow scaled width < minimum video width
  if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

  // now scale the video
  jQuery('video').width(scale * vid_w_orig);
  jQuery('video').height(scale * vid_h_orig);
  // and center it by scrolling the video viewport
  jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
  jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);

  // debug output
  jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
  jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
  jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
  jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
  jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
  jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
  jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
  jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
  jQuery('#debug').append("<p>scale: " + scale + "</p>");
};

#video-viewport {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: -1; /* for accessing the video by click */
}

#debug {
  position: absolute;
  top: 0;
  z-index: 100;
  color: #fff;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
  <video autoplay controls preload width="640" height="360">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
  </video>
</div>

<div id="debug"></div>

score 21 · Accepted Answer

Daniel de Wit の回答とコメントに基づいて、もう少し検索しました。解決策について彼に感謝します。

object-fit: cover;解決策は、優れたサポートを備えたものを使用することです (最新のすべてのブラウザーがサポートしています)。本当に IE をサポートしたい場合は、object-fit-imagesやobject- fit のようなポリフィルを使用できます。

デモ:

img {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>

そして親と：

div {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
img {
  width: 100%;
  height: 100%;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>

score 16 · Accepted Answer

他の答えは良かったのですが、javascript が含まれているか、ビデオを水平方向と垂直方向の中央に配置していません。

この完全な CSS ソリューションを使用して、background-size: cover プロパティをシミュレートするビデオを作成できます。

  video {
    position: fixed;           // Make it full screen (fixed)
    right: 0;
    bottom: 0;
    z-index: -1;               // Put on background

    min-width: 100%;           // Expand video
    min-height: 100%;
    width: auto;               // Keep aspect ratio
    height: auto;

    top: 50%;                  // Vertical center offset
    left: 50%;                 // Horizontal center offset

    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);         // Cover effect: compensate the offset

    background: url(bkg.jpg) no-repeat;      // Background placeholder, not always needed
    background-size: cover;
  }

score 13 · Accepted Answer

M-Pixel のソリューションは、 Timothy の回答のスケーリングの問題を解決するという点で優れています(ビデオは拡大されますが、縮小されないため、ビデオが非常に大きい場合、その一部に小さなズームしか表示されない可能性が高くなります)。ただし、その解決策は、ビデオコンテナーのサイズに関連する誤った仮定に基づいています。つまり、ビューポートの幅と高さの 100% である必要があります。うまくいかないケースがいくつか見つかったので、自分で問題に取り組むことにしました。究極の解決策を思いついたと思います。

HTML

<div class="parent-container">
    <div class="video-container">
        <video width="1920" height="1080" preload="auto" autoplay loop>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

CSS

.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

これは動画の比率にも基づいているため、動画の比率が 16/9 以外の場合は、padding-bottom % を変更する必要があります。それ以外は、そのまま使用できます。IE9+、Safari 9.0.1、Chrome 46、Firefox 41 でテスト済み。

編集 (2016 年 3 月 17 日)

この回答を投稿して以来、要素と要素の両方をシミュレートする小さな CSS モジュールを作成しましbackground-size: coverた: http://codepen.io/benface/pen/NNdBMjbackground-size: contain<video>

ビデオのさまざまな配置をサポートしています ( と同様background-position)。containまた、実装は完全ではないことに注意してください。とは異なりbackground-size: contain、コンテナーの幅と高さが大きい場合、ビデオが実際のサイズを超えて拡大縮小されることはありませんが、場合によってはそれでも役立つと思います。また、特別な組み合わせを取得するために一緒に使用できる特別なクラスfill-widthとクラスを追加しました...試してみて、自由に改善してください!fill-heightcontaincontaincover

score 4 · Accepted Answer

CSS と小さな js を使用すると、ビデオが背景を覆い、水平方向に中央揃えになります。

CSS:

video#bgvid {
    position: absolute;
    bottom: 0px; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    overflow: hidden;
}

JS：（これをウィンドウのサイズ変更でバインドし、個別に1回呼び出します）

$('#bgvid').css({
    marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})

score 3 · Accepted Answer

長いコメントセクションの直後に、これがあなたが探しているものだと思います。jQuery ベースです。

HTML:

<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">

JS:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$(window).height()){
            img.style.height=$(window).height()+"px";
       }
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       } 
}
&lt;/script>

CSS:

body{
    overflow: hidden;
}

上記のコードはブラウザの幅と高さを使用していますが、これを div 内で行う場合は、次のように変更する必要があります。

分割の場合:

HTML:

<div style="width:100px; max-height: 100px;" id="div">
     <img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>

JS:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
&lt;/script>

CSS:

div{
   overflow: hidden;
}

また、これはGoogle Chromeであることをテストしただけであることも述べておく必要があります...ここにjsfiddleがあります： http://jsfiddle.net/ADCKk/

score 1 · Accepted Answer

私はこの問題を抱えていたので、この解決策も投稿するつもりですが、他の解決策は私の状況ではうまくいきませんでした...

background-size:cover;要素の background-image プロパティの代わりに要素の css プロパティを適切にシミュレートするには、画像の縦横比を現在のウィンドウの縦横比と比較する必要があるため、サイズに関係なく (また、画像が幅よりも高い）ウィンドウは、ウィンドウを埋める要素です（また、ウィンドウを中央に配置しますが、それが要件であったかどうかはわかりません）...

簡単にするために画像を使用すると、ビデオ要素もうまく機能すると確信しています。

最初に要素のアスペクト比を取得し (ロードされたら)、ウィンドウのサイズ変更ハンドラーをアタッチし、最初のサイズ変更のために 1 回トリガーします。

var img = document.getElementById( "background-picture" ),
    imgAspectRatio;

img.onload = function() {
    // get images aspect ratio
    imgAspectRatio = this.height / this.width;
    // attach resize event and fire it once
    window.onresize = resizeBackground;
    window.onresize();
}

次に、サイズ変更ハンドラーで、ウィンドウの現在の縦横比を画像の元の縦横比と比較して、幅を埋めるか高さを埋めるかを最初に決定する必要があります。

function resizeBackground( evt ) {

// get window size and aspect ratio
var windowWidth = window.innerWidth,
    windowHeight = window.innerHeight;
    windowAspectRatio = windowHeight / windowWidth;

//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
    // we are fill width
    img.style.width = windowWidth + "px";
    // and applying the correct aspect to the height now
    img.style.height = (windowWidth * imgAspectRatio) + "px";
    // this can be margin if your element is not positioned relatively, absolutely or fixed
    // make sure image is always centered
    img.style.left = "0px";
    img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
    img.style.height = windowHeight + "px";
    img.style.width = (windowHeight / imgAspectRatio) + "px";
    img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
    img.style.top = "0px";
}

}

score 0 · Accepted Answer

みんな、私にはより良い解決策があり、それは短く、私にとっては完璧に機能します。動画に使用しました。そして、css の cover オプションを完全にエミュレートします。

Javascript

    $(window).resize(function(){
            //use the aspect ration of your video or image instead 16/9
            if($(window).width()/$(window).height()>16/9){
                $("video").css("width","100%");
                $("video").css("height","auto");
            }
            else{
                $("video").css("width","auto");
                $("video").css("height","100%");
            }
    });

if を反転すると、それ以外の場合は含まれます。

で、cssはこちら。(中央に配置したくない場合は使用する必要はありません。親 div は「position:relative」である必要があります)

CSS

video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}

javascript - 背景サイズをシミュレート:カバーオンまた

19 に答える 19

jsフィドル

編集 (2016 年 3 月 17 日)

Related

Reference

javascript - 背景サイズをシミュレート:カバーオン