Question

我正在寻找简单的解决方案，始终保持视频的宽高比，同时也始终将视频放在浏览器窗口中，以适应宽度和高度。

到目前为止，我发现的所有解决方案都只适合宽度，但我也需要适合高度。：}

Answer 1

我最初为SO上的另一个问题写了这个图片，但它应该适用于任何元素。只需更改第一个变量即可匹配您的视频元素。如果只调整单个元素的大小，也可以删除for循环。

JS：

function resize() {
    var img = document.getElementsByTagName('img'); 

    var w = window.innerWidth;
    var h = window.innerHeight;
    //console.log(w);
    //console.log(h);

    for (i = 0; i < img.length; i++) { 
        var ratio = (img[i].clientHeight / img[i].clientWidth);
        if (img[i].clientHeight > h && img[i].clientWidth < w) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientHeight <= h && img[i].clientWidth < w && ratio > 1) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientWidth >= w) {
            img[i].style.width = w + "px";
        }
        if (img[i].clientHeight < h && img[i].clientWidth <= w  && ratio < 1) {
            img[i].style.width = w + "px";
        }
    }
}

resize();
window.onresize = resize;

JSFiddle：https://jsfiddle.net/hopkins_matt/k7t26sw5/

Answer 2

Bootstrap这样做。诀窍是CSS填充底部是根据元素的宽度计算的。

.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* calculate by aspect ratio (h / w * 100%) */
}
.video-container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <video class="video"></video>
</div>

见this example。它适用于<embed>，<object>，<iframe>和<video>标记。我的例子只是一个彩色的<div>，它保持了它的'＆＃39;纵横比常数。

Answer 3

您可以尝试仅CSS路由。 YouTube提供了我一直在寻找的解决方案，该解决方案是将宽度和高度保持为16：9的比例。

video {
    width: 100%;
    min-height: 480px;
    height: calc((9 / 16) * 100vw);
    max-height: calc(100vh - 169px);
}

使用HTML5，无论视频的比例如何，视频的外观都会对父级产生影响。

Answer 4

尝试使用Javascript ...

function updateHeight()
{
    var videoHeight = 9 * videoDom.offsetWidth / 16;
    videoDom.style.height = vidoeHeight + "px";
}

window.onload = function()
{
  updateHeight();
}

window.onresize = function()
{
  updateHeight();
}

假设您的视频的宽高比为16：9。

HTML视频调整大小以始终适合

4 个答案: