html - 是否有任何替代对象适合 :contain?

Question

我正在尝试将 2 个视频交替放入我的响应式页面中。一种是肖像，一种是风景。我的 CSS 中的 object-fit:contain 在全桌面屏幕上看起来不错。但是，当我调整页面大小时，当我的横向视频被放入时，顶部和底部会出现巨大的填充。我应该怎么做才能删除它，而不需要为每个视频手动编辑我的 CSS？

我还有一个视频叠加层( Canvas )也应该适合我的视频，而不是父 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