除了object-fit:contain之外，还有其他选择吗？

Question

我试着把2个视频放在我的响应页面。一个是肖像，一个是风景。我的CSS中的object-fit:contain在全桌面屏幕上看起来很好。但是当我调整我的页面大小时，当我放入我的风景视频时，从顶部和底部出现了巨大的填充。我应该做什么来删除它，而不是手动编辑我的CSS为每个视频？

另外，我有一个视频覆盖(画布)，应该也适合我的视频，而不是父div。

谢谢！<3

HTML

<div id='media-player'>
    <canvas id="my-canvas"></canvas>
    <video id='media-video' preload="auto">
        <source src='media/snatch.mp4.mp4' type='video/mp4'>
        <source src='media/snatch.oggtheora.ogv' type='video/webm'>
    </video>
</div>

CSS

#media-player
{
    height: 100%;
    width: 100%;
    background-color: #d6d6d6;
}
video
{
    height: inherit;
    width: inherit;
    object-fit:contain;
}
#my-canvas
{
    position:absolute !important;
    z-index:100000;
    margin: 0 auto;
    background-color:rgba(68, 170, 213, 0.0);
    height:inherit;
    width:inherit;
    background-color:#0;
}

Answer 1

有点晚了，但是哦，我们将回答，以防有人遇到这个问题

为了保持图像或视频的纵横比，您当然可以使用

这个

object-fit:contain;

但是你会得到对象的位置，这会给图像带来不可见的边距，所以你要做的就是将它设置为0。

object-fit:contain;


object-position: 0% 0%; 

默认情况下，它将是50% 50%你只是看不到它，你也为了更好的缩放，只是个人喜好是将图像或视频包装在一个容器中，这样你就可以瞄准整个视频或图像，假设你在视频或下面的某种类型的标题示例下面有一个标题。

container video{ object-fit:contain; object-position: 0% 0%;}

这将以保存媒体文件的容器为目标。但同样，如果您只想针对图像，则可以复制第一个示例。我将在下面留下一个链接，让每个人都能理解object-fit：enter link description here

object-fit info