Html 图像和叠加don';不考虑最大高度和最大宽度,绝对div不';封面图片

Html 图像和叠加don';不考虑最大高度和最大宽度,绝对div不';封面图片,html,css,max,width,overlay,Html,Css,Max,Width,Overlay,我在一个中有一个垂直视频,不确定这是否是您想要的,但在锚定标记(.media container)中添加一个明确的宽度和高度(在vh中)似乎可以让事情变得更好: .media容器{ 显示:内联flex; 位置:相对位置; 最大高度:85vh; 最大宽度:95vh; /*增加了这两行*/ 宽度:95vh; 高度:85vh; } .媒体容器垂直>视频{ 显示:内联块; 身高:100%; 宽度:100%; } .覆盖{ 位置:绝对位置; 宽度:100%; 身高:100%; 不透明度:.6; 背景色:

我在一个
中有一个垂直视频,不确定这是否是您想要的,但在锚定标记(
.media container
)中添加一个明确的
宽度
高度
(在
vh
中)似乎可以让事情变得更好:

.media容器{
显示:内联flex;
位置:相对位置;
最大高度:85vh;
最大宽度:95vh;
/*增加了这两行*/
宽度:95vh;
高度:85vh;
}
.媒体容器垂直>视频{
显示:内联块;
身高:100%;
宽度:100%;
}
.覆盖{
位置:绝对位置;
宽度:100%;
身高:100%;
不透明度:.6;
背景色:#fff;
}

.media container vertical>video
这没有选择任何内容,这里的最终结果是什么?修复了,这是重命名本地类时的输入错误,我认为这会减少readability@ZohirSalak代码片段现在会显示一个准确的结果如果你想让覆盖图填满屏幕为什么不
100vh
?它不尊重宽度,因为你正在使用
vh
作为你应该使用的
vw
的宽度,谢谢,但这不起作用。我编辑了您的代码片段,将覆盖颜色更改为红色,以便您可以看到。问题是,当窗口处于横向时,我希望宽度仍然小于95vh,而最大宽度仅设置为95vh,以便在移动设备上将其最小化。