响应式对象适合：在Chrome上进行封面修复 [英] Responsive object-fit: cover fix on Chrome

问题描述

我知道还有其他人对此有疑问，但他们已经老了，并没有更新浏览器当前的支持。他们没有涉及到Chrome的特殊问题。

我想要一个视频（我也想用图片来做，但我在这里使用视频）占领100％的窗口宽度，但容器具有有限的指定高度。保持视频的纵横比（这是非常重要的）。

基本上， object-fit：cover 在这里工作很好。在Safari中，视频的高/低比例尺保持纵横比。

尊重容器的高度。元素超过了他的容器的高度，并根据窗口的宽度保持增长到最低。

object-fit：fill 在这两种浏览器中都很好，但是这里的问题很明显，纵横比不受尊重，视频/图像/等变形。

以下是我有：

HTML

 < video preload autoplay loop poster = poster.jpgid =bgvid> 
< source src =image / video.mp4type =video / mp4> 
< / video> 
  

CSS

  #bgvid {
 width：100％; 
最小宽度：100％; 
 height：445px; 
最大高度：445px; 
 background-color：＃f0f0f0; 
 object-fit：cover; / *封面完美地在Safari * / 
} 
  

我的问题是，我怎么能在所有浏览器中作出响应，保持元素的纵横比（）尊重容器高度（或者至少是最小高度或最大高度）？

---

解决方案

我自己打了这个。它看起来像是将视频元素封装在div中并将溢出设置为隐藏，然后它将解决Chrome的错误，例如：

 < div class =wrapper> 
< video preload autoplay loop poster =poster.jpgid =bgvid> 
< source src =image / video.mp4type =video / mp4> 
< / video> 
< / div> 
  

with css

  #bgvid {
 width：100％; 
身高：100％; 
 background-color：＃f0f0f0; 
 object-fit：cover; / *封面在Safari *上完美运行* / 
} 
 
 .wrapper {
 width：100％; 
最小宽度：100％; 
 height：445px; 
最大高度：445px; 
 overflow：hidden; 
} 
  

我也刚刚发现了一些似乎覆盖的问题文件Chrome在此方面的错误：

• https://code.google.com/p/chromium/issues/detail?id=400829


• https://code.google.com/p/chromium/issues/detail?id=441890

I know there's others questions about this, but they are old and not updated with the browsers current support. And they not cover the Chrome particular problem with this.

I want a video (I want to do that with image too, but here I'm using a video) occupying 100% the width of the window, but with the container having a limited, specified height. Maintaining video's aspect-ratio (which is very important).

Basically, the object-fit: cover does the job fine here. And in Safari works perfectly, the video upscale/downscale inside his container maintaining aspect-ratio.

In Chrome that happens too, but there's no respect for the height of the container. The element surpasses the height of his container and keep growing to the bottom according to the window's width.

object-fit: fill woks well in both browsers, but the problem here is obvious, the aspect-ratio is not respected, deforming the video/image/etc.

Here's what I have:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
</video>

CSS

#bgvid {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

My question is, how can I make this work perfectly respecting the container height (or at least min-height or max-height), responsively in all browsers, keeping the element's aspect-ratio?

---

解决方案

I've just hit this myself. It looks like if you wrap your video element in a div and set overflow as hidden, then it'll work around Chrome's bug, i.e. something like:

<div class="wrapper">
  <video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
  </video>
</div>

with css

#bgvid {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

.wrapper {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  overflow: hidden;
}

I've also just found a couple of issues file that seem to be covering Chrome's bug on this:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890

这篇关于响应式对象适合：在Chrome上进行封面修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！