在 <video> 或 <img> 上模拟 background-size:cover
Posted
技术标签:
【中文标题】在 <video> 或 <img> 上模拟 background-size:cover【英文标题】：simulate background-size:cover on <video> or <img> 【发布时间】：2012-06-03 14:05:31 【问题描述】：如何在<video> 或<img> 等html 元素上模拟background-size:cover 的功能？
我希望它像这样工作
background-size: cover;
background-position: center center;
【问题讨论】：
好吧，我从来没有使用过 background-size: cover;但我在网上看过它，所以您想要一种在窗口调整大小时调整大小的全屏图像/视频的方法？ 是的，但cover 有一些微妙之处。请参阅 link 上的背景大小 101。
好的，所以要简化图像/视频的 100% 宽度，如果溢出它会被剪切？如果你想要这个，我可以看看我是否可以编写代码，但对于视频，你应该记住，你需要一个自定义播放器，因为在大多数浏览器中，控件位于播放器的底部，如果有，它们会被切断是溢出...
是的，在两侧同样溢出。我知道视频控制问题。
如果窗口比图像高，我认为它会在垂直轴的某处留下空白空间。在这种情况下，图像应该在两侧溢出，并且其高度与窗口相同。当窗口比图像宽时，反之亦然。
【参考方案1】：
我也遇到了这个问题，我用下面的 css 解决了这个问题：
#video-container
overflow: hidden;
#video
width: 100%;
position:absolute;
top: 0;
right: 0;
z-index: -1;
【讨论】：
这不能保证视频会填满其父容器，例如，1000px 宽和 1000px 高的容器，当视频宽于高时，此解决方案会失败。【参考方案2】：这是我一段时间以来的烦恼，但我遇到了一个很棒的解决方案，它不使用任何脚本，并且可以使用 5 行 CSS（如果算上 9 行）在视频上实现完美的封面模拟选择器和括号）。 这有 0 个边缘情况不能完美运行，缺少 CSS3 兼容性。
您可以查看示例here（已存档）
Timothy's solution 的问题在于它不能正确处理缩放。如果周围元素小于视频文件，则不会按比例缩小。即使你给视频标签一个很小的初始大小，比如 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，所以如果你需要compatibility with much older browsers，你就需要使用脚本。
【讨论】：
这是最好的答案。没有 javascript，纯 CSS，可正确缩放并居中。 啊，是的，伙计。这是 2016 年的答案。忽略所有其他人。 您愿意解释一下为什么会这样吗？我无法绕开它。vh 和 vw 有什么关系？
@insidesin：发个小提琴？
在 2020 年，最好的解决方案是 object-fit:cover，如 Daniël de Wit 的回答中所述【参考方案3】：
基于Daniel de Wit's answer和cmets，我搜索了一下。感谢他的解决方案。
解决方案是使用object-fit: cover;，它有一个很棒的support（每个现代浏览器都支持它）。如果你真的想支持 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>【讨论】：
最佳现代答案。 对于任何以现代浏览器为目标的人来说，这都是答案。使用object-fit: cover 和 width 和 height 设置为 100%，你会得到一个按比例缩放的 img 或 video 在中心放大，没有任何大惊小怪。【参考方案4】：
object-fit: cover 是这个 IE Safari polyfill 的最佳答案。
https://github.com/constancecchen/object-fit-polyfill
它支持img、video和picture元素。
【讨论】：
【参考方案5】：老问题，但如果有人看到这个，我认为最好的答案是将视频转换为动画 GIF。这为您提供了更多控制权，您可以将其视为图像。这也是它在移动设备上工作的唯一方式，因为您无法自动播放视频。我知道问题是要求在<img> 标记中执行此操作，但我并没有真正看到使用<div> 和执行background-size: cover 的缺点
【讨论】：
这是个好主意，在某些情况下值得一试。唯一的缺点是 *.gif （在我的情况下）文件大小更大。我将 2.5MB *.mpeg 转换为 16MB *.gif。 我同意，而且通常.gif 的大小要大得多，同时也更模糊。自从我写了这个答案后，我的观点发生了变化。很遗憾你不能将两者的优点结合起来。
我最终得到了一个（缩短的）移动版 *.gif 和桌面版 *.mp4。【参考方案6】：
我是这样做的。 this 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 >
<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>【讨论】：
为什么这个解决方案被否决了？出于所有意图和目的，它似乎解决了问题。 这是我为这个问题找到的最佳解决方案。谢谢！ 如果视频很大而窗口很小，这很好用，但如果窗口大于视频并且视频需要放大，则对我不起作用。我将@Timothy-Ryan-Carpenter (answer down here) 的最小技巧添加到视频标签中：video min-width: 100%; min-height: 100%; ，它就像一个魅力。
我发现这种方法也很有用，并将其打包为一个简单的 jQuery 插件供任何感兴趣的人使用：github.com/aMoniker/jquery.videocover
尽管@AlexandreDuBreuil 说了什么，但这可以很好地放大视频（亲自查看：fiddle.jshell.net/GCtMm/show）。这绝对是这里最好的解决方案。与此处的其他答案相比，它的 JS 太重了，但如果您想要 background-size: cover 观看视频，这就是您所需要的。【参考方案7】：
我刚刚解决了这个问题并想分享。这适用于 Bootstrap 4。它适用于 img，但我没有使用 video 对其进行测试。这是 HAML 和 SCSS
HAML
.container
.detail-img.d-flex.align-items-center
%imgsrc: '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>【讨论】：
【参考方案8】：当您的浏览器宽度小于视频宽度时，最佳答案不会缩小视频。尝试使用这个 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%);
【讨论】：
为什么需要否定的z-index？
它不是——只是在使用多层元素进行设计时很有帮助。我已经删除了。【参考方案9】：
M-Pixel's solution 很棒，因为它解决了Timothy's answer 的缩放问题（视频会放大但不会缩小，所以如果你的视频真的很大，你很有可能只会看到部分放大它）。但是，该解决方案基于与视频容器大小相关的错误假设，即它必须是视口宽度和高度的 100%。我发现了一些对我不起作用的情况，所以我决定自己解决这个问题，我相信我想出了最终解决方案。
HTML
<div class="parent-container">
<div class="video-container">
<video 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 模块来模拟 <video> 元素上的 background-size: cover 和 background-size: contain：http://codepen.io/benface/pen/NNdBMj
它支持视频的不同对齐方式（类似于background-position）。另请注意，contain 的实现并不完美。与background-size: contain 不同，如果容器的宽度和高度更大，它不会将视频缩放到超过其实际大小，但我认为它在某些情况下仍然有用。我还添加了特殊的fill-width 和fill-height 类，您可以将它们与contain 一起使用以获得contain 和cover 的特殊组合...试试吧，随时改进它！
【讨论】：
无论如何，这不会将视频缩放到高于正常分辨率以使其适合 100% 宽度/高度。因此它没有复制“封面”功能。 @jetlej 在这里。你在什么浏览器上测试？你看我的codepen了吗？ 它作为 Edge 的后备对我来说效果很好。干杯 @MrThunder 如果您将其用作后备方案，您会使用什么作为主要解决方案？ @benoitr007 我将object-fit: cover 用于 FF 和 chrome 以及您的 Modernizr for IE 解决方案【参考方案10】：
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-width 或 min-height 就可以了。
此解决方案不像封面那样将视频居中。
只是一个评论，以防止新手拉出他们的头发：#video_background应该是#videobackground。
这根本不会缩小视频（我没有尝试放大一个），如果浏览器窗口很小，视频很大，这会导致很多问题。所以基本上它只处理背景尺寸的出血部分：覆盖，而不是缩放部分。
使用当前技术，这应该是公认的答案：CSS 解决方案优于 Javascript 解决方案。即使它要求您正确设置您的 parentNode。要使视频居中，请使用：position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);.【参考方案11】：
伙计们，我有一个更好的解决方案，它简短而且对我来说非常有效。我用它来视频。它完美地模拟了 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%;
【讨论】：
【参考方案12】：@Hidden Hobbes
这个问题在 6 天后结束，有一个来自 Hidden Hobbes 的开放式悬赏，价值 +100 声望。 创造性地使用视口单元来获得灵活的纯 CSS 解决方案。
您在这个问题上为仅 CSS 的解决方案打开了赏金，所以我会试一试。我对此类问题的解决方案是使用固定比例来决定视频的高度和宽度。我通常使用 Bootstrap，但我从那里提取了必要的 CSS 以使其在没有的情况下工作。这是我之前使用的代码，其中包括以正确比例居中嵌入视频。它也应该适用于<video> 和<img> 元素。这是与此相关的最重要的元素，但我也给了你另外两个元素，因为我已经将它们放在了周围。祝你好运！ :)
jsfiddle fullscreen example
.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" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" ></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" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" ></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" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" ></iframe>
</div>
</div>
</div>
</div>
</div>
</div>【讨论】：
感谢@turbopipp 的回答，但恐怕您误解了我赏金的原因。我已经提出了它，所以我可以将它奖励给现有的答案，它只是不允许我这样做，直到赏金活动 24 小时。尽管如此，为您的努力 +1 百分比填充技巧是确保元素保持正确纵横比的有用方法。 啊哈，这真的没有什么麻烦，你真的很高兴为已经存在的答案提供赏金。我想我应该阅读赏金系统。 :) 谢谢【参考方案13】：为了回答来自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%);
我会直接评论蒂莫西的回答，但我没有足够的声誉这样做。
【讨论】：
【参考方案14】：其他答案很好，但它们涉及 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;
【讨论】：
这对我不起作用。视频没有放大到全屏。我可以看到这个例子的 html 吗？只是body里面的video标签吗？ 非常好的解决方案。起初它对我不起作用，但它可能是我错过的，因为当我复制和粘贴你的 CSS 时，它起作用了！谢谢;) 对我来说效果很好。我只是改变了位置：固定到绝对【参考方案15】：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：（绑定 this 和 window resize 并单独调用一次）
$('#bgvid').css(
marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
)
【讨论】：
【参考方案16】：对于某些浏览器，您可以使用
object-fit: cover;
http://caniuse.com/object-fit
【讨论】：
这是一个非常强大的声明，如果浏览器采用它，将结束在网站上扩展内容的许多麻烦。 这正是我想要的！ 对于那些不支持它的浏览器有一个 polyfill（目前）：github.com/anselmh/object-fit 也必须申请height: 100%; width: 100%;。感谢这个现代答案
这应该是 2021 年公认的答案！谢谢。【参考方案17】：
这种方法只使用 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*/
【讨论】：
【参考方案18】：在我们冗长的评论部分之后，我认为这就是您要寻找的，它是基于 jQuery 的：
HTML：
<img 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 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/
【讨论】：
当我更改结果框架的大小或浏览器大小时，jsfiddle 似乎没有做任何事情。我在 Chrome 中试过这个。 我已经更新了它，但我仍然有一个小问题，如果你将宽度减小到太多，它会突然跳跃...jsfiddle.net/ADCKk/1 好的，抱歉，但我一无所知，我已经尝试了很多东西，我想我自己都弄糊涂了，我不确定它是否可能......上面的脚本只在你刷新页面，要在调整窗口大小时使其工作，您需要在 js 中使用 window.resize 事件，但我无法使其工作，也许您可以使用该信息 :) 无论如何祝你好运【参考方案19】：我也想发布这个解决方案，因为我遇到了这个问题，但其他解决方案不适用于我的情况......
我认为要正确模拟元素上的 background-size:cover; css 属性而不是元素背景图像属性，您必须将图像纵横比与当前 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";
【讨论】：
以上是关于在 <video> 或 <img> 上模拟 background-size:cover的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript多个h5播放器video，点击一个播放其他暂停