在 <video> 或 <img> 上模拟 background-size:cover

IT技术 javascript jquery css
2021-02-15 22:06:08

如何模拟background-size:coverhtml 元素上的功能，例如<video>或<img>？

我希望它像

background-size: cover;
background-position: center center;
6个回答

这是我拉了一段时间的东西，但我遇到了一个很好的解决方案，它不使用任何脚本，并且可以使用 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，所以如果您需要与更旧的浏览器兼容，您将需要使用脚本。

这是最好的答案。没有 javascript，纯 CSS，可以正确缩放并居中。
2021-04-27 22:06:08
啊是的人。这是 2016 年的答案。忽略所有其他人。
2021-04-29 22:06:08
你愿意解释一下为什么会这样吗？我无法绕过它。做什么vh和vw有什么关系？
2021-05-06 22:06:08
@insidesin：张贴小提琴？
2021-05-12 22:06:08
2020 年，最佳解决方案是 object-fit：cover，如 Daniël de Wit 的回答中所述
2021-05-13 22:06:08

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 将允许视频保持视频的纵横比，这通常是任何普通浏览器在正常分辨率下的纵横比。任何多余的视频都会从页面的一侧流出。

此解决方案不会像封面那样将视频居中。
2021-04-17 22:06:08
这比其他答案简单得多，对我来说效果很好。只是设置min-width或min-height做的伎俩。
2021-04-29 22:06:08
对于当前的技术，这应该是公认的答案：CSS 解决方案比 Javascript 解决方案更可取。即使它要求您正确设置 parentNode。要使视频居中，请使用：position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);。
2021-05-02 22:06:08
这根本不会缩小视频（我没有尝试放大视频），如果浏览器窗口很小，而视频很大，这会导致许多问题。所以基本上它只处理背景尺寸的出血部分：封面，而不是缩放部分。
2021-05-08 22:06:08
只是为了防止新手拔头发的评论：#video_background{ 应该是 #videobackground{。
2021-05-14 22:06:08

对于某些浏览器，您可以使用

object-fit: cover;

http://caniuse.com/object-fit

这正是我要找的！
2021-04-19 22:06:08
那些不支持它的浏览器有一个polyfill（还）：github.com/anselmh/object-fit
2021-04-19 22:06:08
这应该是 2021 年公认的答案！谢谢你。
2021-04-24 22:06:08
也必须申请height: 100%; width: 100%;。感谢这个现代答案
2021-05-11 22:06:08
这是一个非常强大的声明，如果浏览器采用它，将结束在网站上缩放的许多问题。
2021-05-16 22:06:08

这是我如何做到的。一个工作示例在这个 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>

为什么这个解决方案被否决了？出于所有意图和目的，它似乎解决了问题。
2021-04-18 22:06:08
这是我为这个问题找到的最好的解决方案。谢谢！
2021-05-01 22:06:08
尽管@AlexandreDuBreuil 说了什么，但这可以很好地扩展视频（请亲自查看：fiddle.jshell.net/GCtMm/show）。这绝对是这里的最佳解决方案。遗憾的是，与这里的其他答案相比，JS 太重了，但是如果您想要background-size: cover视频，这就是您所需要的。
2021-05-05 22:06:08
如果视频很大而窗口很小，这很有效，但如果窗口大于视频并且视频需要放大，则对我不起作用。我将@Timothy-Ryan-Carpenter（在此处回答）的最小技巧添加到视频标签中：video { min-width: 100%; min-height: 100%; }并且它的作用就像一个魅力。
2021-05-07 22:06:08
我发现这种方法也很有用，并将其打包为一个简单的 jQuery 插件供任何感兴趣的人使用：github.com/aMoniker/jquery.videocover
2021-05-11 22:06:08

根据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>

最好的现代答案。
2021-04-16 22:06:08
这是针对现代浏览器的任何人的答案。使用object-fit: cover和width并height设置为 100%，您可以毫不费力地获得按比例缩放img或video放大的中心。
2021-04-23 22:06:08
其它你可能感兴趣的问题
上一篇location.host 与 location.hostname 和跨浏览器兼容性？ 下一篇“单页”JS 网站和 SEO