繁体   English   中英

HTML视频无法填充父div

HTML Video not filling parent div

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想要一个HTML视频标签来填充我的卡。 像这样:

<ion-card>
  <ion-card-header>
    <ion-card-title>Ion Videp</ion-card-title>
  </ion-card-header>
    <div class="video-wrapper">
      <video #video controls="controls" class="video" autoplay="autoplay">
        <source src="../../../assets/push-ups.mp4" type="video/mp4" />
      </video>
    </div>
</ion-card>

但是视频只是保持原始大小。

我尝试了以下CSS样式:

.video-wrapper {
    position: relative;
    height: 200px;
}

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

但这仍然行不通。

有任何想法吗?

1 个回复
.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100vw; /* you can changes size*/
    min-height: 100vh;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}
1 HTML5 Canvas无法调整大小以填充父div

我试图做一个方形画布。 我想使用CSS做到这一点,以便在页面加载时立即调整画布的大小。 为了使其方形,我将其包装在div中,并按以下方式设置其样式: http://jsfiddle.net/evopgwzd/ 但是,没有任何显示。 如果将换行的css设置为硬编码的宽度大小 ...

2 无法在 React js 中用视频填充 div

目标 目标是从聚会中重现此主页,视频位于导航栏下方。 问题 与图像不同,视频很难在 div 元素内驯服。 纵横比保持不变,但视频在 div 中留下空白。 据我所知, object-fit仅支持“传统”html。 使其在 React js object-fit工作的尝试失败了。 如何在 React ...

3 无法理解为什么div不填充父div?

我有下一个html: 和CSS: 带有page类的div按内容换行,但是我需要填充除sidebar宽度以外的父级宽度。 也许很简单,但是Imma noobie在CSS中。 PS对不起,我的英语。 ...

2016-02-07 11:22:57 2 212   html/ css
5 HTML - 使子元素忽略父Div的填充

我在容器div中有一个标题div,标题的背景颜色与容器div不同。 我的问题是容器div在右侧和左侧有填充,但我希望标题忽略此填充,因此背景颜色将显示完整的宽度而不会被填充切断。 这是我的代码的jsfiddle: http : //jsfiddle.net/6e46fzge/ ...

2015-04-01 01:36:06 2 15094   html/ css
6 填充父div高度

所以。 在我的示例中,我们有3个div。 Main div是一个容器,接下来的两个是孩子的容器。 所以我想知道如何将容器扩展到超过窗口高度的100%(通过使用自动),并由第二个孩子填充高度(100%无法工作) 任何帮助都会像适当的 #main { margin: 0 ...

2019-02-20 18:14:07 1 444   css
7 Div填充父容器

我有一个评论,就像我在下面嘲笑的那样。 .avatar & .actions有一个静态宽度。 .comment没有。 我应该如何构建我的HTML和CSS,以便.text将占用所有可用空间,因为.comment改变它的宽度? ...

2011-06-11 08:42:48 3 4844   html/ css
8 中断父div填充

所以说我有一个包装20 px填充的div,我有一个宽度为100%且边框顶部为1 px的div,以制作分隔线。 但是我希望这条线触摸包装div的边缘。 没有绝对定位怎么办? ...

2014-01-23 17:43:12 2 131   css
9 子div将填充父div

我有N个非固定宽度的子div 。 而且我有一个不固定宽度的父div 。 我想,以填补和调整孩子div父小号div并排如侧td - tr关系。 我怎样才能做到这一点? ...

2013-03-13 16:03:42 3 627   html/ css
10 父div的Div填充高度?

我想要一个div来填补div的剩余高度。 这是我的HTML和CSS: CSS: * { padding: 0px; margin: 0px; } #container { margin: 85px auto 0px auto; background: # ...

2013-06-24 19:02:05 4 301   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM