代码之家  ›  专栏  ›  技术社区  ›  Brandon Durham

HTML5视频:调整大小时保留纵横比

  •  4
  • Brandon Durham  · 技术社区  · 15 年前

    我在一个容器div中有一个视频元素设置为100%宽度,这个div的最大宽度为800px,最小宽度为400px。调整浏览器大小时,我需要视频元素调整大小,同时保持其原始纵横比。目前,它调整了宽度,但仍保持原来的高度,在上面和下面添加了信盒条来弥补。

    是否可以这样动态地调整视频元素的大小而不诉诸Javascript?

    1 回复  |  直到 15 年前
        1
  •  7
  •   Josh Lee ZZ Coder    15 年前

    根据 the box model, in the section on replaced elements height auto 还有一套 width an intrinstic ratio (就像视频一样),那么使用的高度值应该基于这些值来计算。确保没有指定 高度

    video {
        width: 100%;
    }
    div {
        max-width: 800px;
        min-width: 400px;
    }
    

    尝试显式添加 height: auto !important 看看是不是在别的地方。