또는 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>최소 높이 및 최소 너비를 사용하면 비디오가 비디오의 종횡비를 유지할 수 있습니다. 이는 일반적으로 일반 해상도에서 일반 브라우저의 종횡비입니다. 초과 비디오는 페이지 측면에서 번집니다.
답변
답변
내가 한 방법은 다음과 같습니다. 이 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… 그것을 밖으로 시도하고 그것을 개선 주시기 바랍니다!
