배경 크기 시뮬레이션 : <비디오> 또는 <img>의 표지

또는 background-size:cover같은 html 요소 의 기능을 어떻게 시뮬레이션 할 수 있습니까?<video><img>

나는 그것이 같이 작동하고 싶다.

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

이것은 잠시 동안 머리카락을 뽑아 냈지만 스크립트를 사용하지 않는 훌륭한 솔루션을 발견했으며 CSS 5 줄로 비디오에서 완벽한 커버 시뮬레이션을 얻을 수 있습니다 (선택자와 대괄호를 계산하면 9 ). CSS3 호환성이 부족하여 완벽하게 작동하지 않는 가장자리 케이스가 없습니다 .

여기 에서 예를 볼 수 있습니다.

Timothy의 솔루션 의 문제 는 스케일링을 올바르게 처리하지 않는다는 것입니다. 주변 요소가 비디오 파일보다 작 으면 축소되지 않습니다. 비디오 태그에 16px x 9px와 같은 작은 초기 크기를 지정하더라도 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는, 그래서 훨씬 이전 버전의 브라우저와의 호환성을 , 당신이 사용하는 스크립트가 필요합니다.

jsFiddle

이미지에는 배경 표지를 사용하는 것이 좋으며 너비도 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>

최소 높이 및 최소 너비를 사용하면 비디오가 비디오의 종횡비를 유지할 수 있습니다. 이는 일반적으로 일반 해상도에서 일반 브라우저의 종횡비입니다. 초과 비디오는 페이지 측면에서 번집니다.

일부 브라우저의 경우 사용할 수 있습니다.

object-fit: cover;

http://caniuse.com/object-fit

내가 한 방법은 다음과 같습니다. 이 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>

Daniel de Wit의 답변 과 의견을 바탕으로 좀 더 검색했습니다. 해결책에 대한 그에게 감사합니다.

해결책은 object-fit: cover;큰 지원 이있는 것을 사용 하는 것입니다 (모든 최신 브라우저가 지원함). IE를 정말로 지원하고 싶다면 object-fit-images 또는 object-fit 과 같은 polyfill을 사용할 수 있습니다 .

데모 :

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>

다른 답변은 좋았지 만 자바 스크립트를 포함하거나 비디오를 수평 및 수직으로 중앙에 배치하지 않습니다.

이 전체 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;
  }

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과 background-size: contain에 <video>: 요소 http://codepen.io/benface/pen/NNdBMj를

비디오에 대해 다양한 정렬을 지원합니다 (와 유사 background-position). 또한 contain구현이 완벽하지 않습니다. 와 달리 background-size: contain컨테이너의 너비와 높이가 더 크면 실제 크기를 초과하여 비디오 크기를 조정하지 않지만 경우에 따라 여전히 유용 할 수 있다고 생각합니다. 또한 특별 추가 한 fill-width과 fill-height당신이 함께 사용할 수있는 클래스 contain의 특별한 혼합을 얻을 contain하고 cover... 그것을 밖으로 시도하고 그것을 개선 주시기 바랍니다!

object-fit: cover 이 IE, Safari polyfill의 가장 좋은 답변입니다.

https://github.com/constancecchen/object-fit-polyfill

이지지되고 img, video그리고 picture소자.

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 : (창 크기 조정과 결합하고 별도로 한 번 호출)

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

긴 댓글 섹션 바로 뒤에는 이것이 당신이 찾고있는 것이라고 생각합니다. 그것은 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";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS :

body{
    overflow: hidden;
}

위 코드는 브라우저의 너비와 높이를 사용하는 것입니다. div 내에서이 작업을 수행하는 경우 다음과 같이 변경해야합니다.

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";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS :

div{
   overflow: hidden;
}

나는 또한 이것이 구글 크롬이라는 것을 테스트했다고 말해야한다 ... 여기 jsfiddle이있다 : http://jsfiddle.net/ADCKk/

최고의 답변은 브라우저 너비가 비디오 너비보다 작을 때 비디오를 축소하지 않습니다. 이 CSS를 사용해보세요 (#bgvid가 동영상의 ID가 됨) :

#bgvid {
     position: fixed;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
}

나는이 문제가 있었지만 다른 솔루션이 내 상황에 맞지 않았기 때문에이 솔루션도 게시하고 있습니다.

background-size:cover;요소 배경 이미지 속성 대신 요소 에서 CSS 속성 을 올바르게 시뮬레이션하려면 이미지 종횡비를 현재 창 종횡비와 비교해야하므로 크기에 관계없이 (그리고 이미지가 더 큰 것보다 더 높음) 창은 요소가 창을 채우고 있다는 것입니다 (또한 그것이 요구 사항인지는 모르겠지만 중앙에 위치합니다) ....

단순함을 위해 이미지를 사용하면 비디오 요소도 잘 작동 할 것이라고 확신합니다.

먼저 요소 종횡비를 가져온 다음 (로드 된 후) 창 크기 조정 핸들러를 연결하고 초기 크기 조정을 위해 한 번 트리거합니다.

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

}

이 접근 방식은 CSS와 HTML 만 사용합니다. 실제로 비디오 아래에 div를 쉽게 쌓을 수 있습니다. 덮개이지만 크기를 조정하는 동안 중앙에 있지 않습니다.

HTML :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
    <video autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
    </video>
</div>
</div>
</body>
</html>

CCS :

/*
filename:style.css
*/
body {
    margin:0;
}

#vid video{
position: absolute; 
right: 0; 
top: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
}

#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/ 
}

히든 홉스

이 질문은 6 일 후에 끝나는 Hidden Hobbes의 평판 +100 상당의 공개 현상금이 있습니다. 유연한 CSS 전용 솔루션을 얻기 위해 뷰포트 단위를 발명 적으로 사용합니다.

CSS 전용 솔루션에 대한이 질문에 대한 현상금을 열었으므로 시도해 보겠습니다. 이와 같은 문제에 대한 나의 해결책은 고정 비율을 사용하여 비디오의 높이와 너비를 결정하는 것입니다. 나는 보통 Bootstrap을 사용하지만 거기에서 필요한 CSS를 추출하여 작동하지 않게 만들었습니다. 이것은 내가 이전에 사용했던 코드로, 임베딩 된 비디오를 올바른 비율로 중앙에 배치했습니다. <video>그리고 <img>요소에서도 작동해야합니다. 여기서 관련성이 가장 높은 항목이지만, 이미 주변에 배치되어 있으므로 다른 두 가지도 제공했습니다. 행운을 빌어 요! :)

jsfiddle 전체 화면 예

.embeddedContent.centeredContent {
    margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
    margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
    position:relative;
    display: block;
    padding: 0;
    padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.embeddedContent {
    max-width: 300px;
}
.box1text {
    background-color: red;
}
/* snippet from Bootstrap */
.container {
    margin-right: auto;
    margin-left: auto;
}
.col-md-12 {
    width: 100%;
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent centeredContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent rightAlignedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

에서 주석에 대답하기 위해 weotch 것을 디모데 라이언 목수 의 대답은 고려하지 않습니다 cover의 중심으로 배경을 '나는이 빠른 CSS 수정을 제공합니다 :

CSS :

margin-left: 50%;
transform: translateX(-50%);

이 두 줄을 추가하면 요소가 중앙에 배치됩니다. 더 좋은 점은 HTML5 비디오를 처리 할 수있는 모든 브라우저가 CSS3 변환도 지원하므로 항상 작동합니다.

완전한 CSS는 다음과 같습니다.

#video-background { 
    position: absolute;
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
}

나는 Timothy의 대답에 대해 직접 언급했지만 그렇게 할 충분한 평판이 없습니다.

얘들 아 나는 더 나은 해결책이 짧고 완벽하게 작동합니다. 비디오에 사용했습니다. 그리고 그것은 CSS의 커버 옵션을 완벽하게 에뮬레이트합니다.

자바 스크립트

    $(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%;}

방금이 문제를 해결하고 공유하고 싶었습니다. 이것은 Bootstrap 4에서 작동합니다. 작동 img하지만 video. 다음은 HAML 및 SCSS입니다.

.container
  .detail-img.d-flex.align-items-center
    %img{src: 'http://placehold.it/1000x700'}

.detail-img { // simulate background: center/cover
  max-height: 400px;
  overflow: hidden;

  img {
    width: 100%;
  }
}

/* simulate background: center/cover */
.center-cover { 
  max-height: 400px;
  overflow: hidden;
  
}

.center-cover img {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="center-cover d-flex align-items-center">
    <img src="http://placehold.it/1000x700">
  </div>
</div>

오래된 질문이지만 누군가가 이것을 본다면 내 생각에 가장 좋은 대답은 비디오를 애니메이션 GIF로 변환하는 것입니다. 이렇게하면 훨씬 더 많은 제어가 가능하며 이미지처럼 취급 할 수 있습니다. 동영상을 자동 재생할 수 없기 때문에 모바일에서 작동하는 유일한 방법이기도합니다. 나는 질문이 그것을 할 것을 요청 알고 <img>태그,하지만 난 정말를 사용하는 단점이 표시되지 않습니다 <div>및 일을background-size: cover