Question

我正在尝试将2个视频放入我的响应式页面中。一个是肖像，一个是风景。我的CSS中的object-fit:contain在完整的桌面屏幕中看起来很好。但是当我调整页面大小时，当我的风景视频被放入时，会出现从上到下的巨大填充。如果不为每个视频手动编辑CSS，我该怎么做才能删除它？

此外，我还有一个视频覆盖（画布）也应该适合我的视频，而不是父div。

谢谢！＆LT; 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%;}

这将定位持有媒体文件的容器。但是如果你只想定位图像，你可以复制第一个例子。我将在下面留下一个链接，供大家了解对象： enter link description here

object-fit info

对象适合是否有任何替代方法：包含？

1 个答案: