如何模拟background-size:coverhtml 元素（如<video>or ）上的功能<img>？
我希望它像
background-size: cover;
background-position: center center;
问问题
194715 次
19 回答
186
这是我一段时间以来的头发，但我遇到了一个很好的解决方案，它不使用任何脚本，并且可以使用 5 行 CSS 实现完美的视频封面模拟（如果算上选择器和括号，则为 9 ）。这有 0 个不能完美工作的边缘情况，缺少 CSS3-compatibility。
你可以在这里看到一个例子（存档）
Timothy 解决方案的问题在于它不能正确处理缩放。如果周围元素小于视频文件，则不会按比例缩小。即使你给视频标签一个很小的初始大小，比如 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;），那么视频也会。
如果您也希望视频居中，您可以使用 surefire 居中方法：
/* 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，所以如果你需要与更老的浏览器兼容，你需要使用脚本。
于 2015-05-02T02:34:05.060 回答
138
于 2014-08-01T11:00:26.163 回答
137
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>min-height 和 min-width 将允许视频保持视频的纵横比，这通常是任何普通浏览器在正常分辨率下的纵横比。任何多余的视频都会从页面一侧流出。
于 2013-03-20T04:28:22.237 回答
43
我是这样做的。一个工作示例在这个 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>于 2012-07-19T11:14:00.820 回答
21
根据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>于 2016-11-19T10:59:38.407 回答
16
其他答案很好，但它们涉及 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;
}
于 2014-08-26T08:53:45.177 回答
13
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-height类，您可以将它们一起使用contain以获得特殊的组合...尝试一下，contain并cover随时改进它！
于 2015-11-12T16:47:27.347 回答
8
object-fit: cover是这个 IE，Safari polyfill 的最佳答案。
https://github.com/constancecchen/object-fit-polyfill
它是支持img,video和picture元素。
于 2017-06-04T18:51:53.207 回答
4
CSS 和 little 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'
})
于 2014-08-11T07:29:15.723 回答
3
在我们的长评论部分之后，我认为这就是您要寻找的，它是基于 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 中执行此操作，则必须将其更改为如下内容：
对于分区：
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/
于 2012-05-29T13:22:17.683 回答
3
当您的浏览器宽度小于视频宽度时，最佳答案不会缩小视频。尝试使用这个 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%);
}
于 2017-05-03T17:48:30.020 回答
1
我也想发布这个解决方案，因为我遇到了这个问题，但其他解决方案不适用于我的情况......
我认为要正确模拟background-size:cover;元素上的 css 属性而不是元素 background-image 属性，您必须将图像的纵横比与当前的 Windows 纵横比进行比较，所以无论大小如何（如果图像是高而不是宽）窗口是元素正在填充窗口（并且也将其居中，尽管我不知道这是否是一个要求）....
为了简单起见，使用图像，我相信视频元素也可以正常工作。
首先获取元素的纵横比（一旦加载），然后附加窗口调整大小处理程序，触发一次以进行初始大小调整：
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";
}
}
于 2013-03-19T04:47:40.677 回答
1
这种方法只使用 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*/
}
于 2014-06-29T01:55:25.813 回答
1
这个问题在 6 天后结束，有来自 Hidden Hobbes 的价值 +100 声望的开放式悬赏。创造性地使用视口单元来获得灵活的纯 CSS 解决方案。
您在这个问题上为仅 CSS 的解决方案打开了赏金，所以我会试一试。我对此类问题的解决方案是使用固定比例来决定视频的高度和宽度。我通常使用 Bootstrap，但我从那里提取了必要的 CSS 以使其在没有的情况下工作。这是我之前使用的代码，其中包括以正确比例居中嵌入视频。它也应该适用于<video>和<img>元素。这是最重要的一个，但我也给了你另外两个，因为我已经把它们放在周围了。祝你好运！:)
.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&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&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&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>于 2015-11-11T09:14:36.987 回答
0
为了回答weotch关于Timothy Ryan Carpenter的回答没有考虑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%);
}
我会直接评论蒂莫西的回答，但我没有足够的声誉这样做。
于 2014-08-26T03:24:27.707 回答
0
伙计们，我有一个更好的解决方案，它很简短，对我来说很完美。我用它来视频。它完美地模拟了 css 中的封面选项。
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%;}
于 2016-07-16T20:08:17.300 回答
0
我刚刚解决了这个问题并想分享。这适用于 Bootstrap 4。它适用于img但我没有用video. 这是 HAML 和 SCSS
HAML
.container
.detail-img.d-flex.align-items-center
%img{src: 'http://placehold.it/1000x700'}
SCSS
.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>于 2017-07-02T17:54:25.360 回答
0
老问题，但如果有人看到这个，我认为最好的答案是将视频转换为动画 GIF。这为您提供了更多控制权，您可以将其视为图像。这也是它在移动设备上工作的唯一方式，因为您无法自动播放视频。我知道问题是要求在<img>标签中执行此操作，但我并没有真正看到使用 a<div>和做的缺点background-size: cover
于 2017-08-08T18:22:35.220 回答
0
我也有这个问题，我用下面的 css 解决了这个问题：
#video-container {
overflow: hidden;
}
#video{
width: 100%;
position:absolute;
top: 0;
right: 0;
z-index: -1;
}
于 2021-06-08T05:20:21.937 回答