为什么我的视频在 Firefox 上拉伸而不是 Chrome？

Question

我尝试制作始终以 100% 宽度拉伸的横幅视频。它在 Firefox 上运行良好，但在 Chrome 上运行不佳。为什么？例如，参见 https://www.gustdive.com。我尝试使用代码片段，但是，存在太多兼容性问题并且无法正常工作。我可以提供具体示例的唯一方法是使用我的 link 本身。

感谢@Mav 提供可视化示例！请参阅

火狐

Chrome

这是我的代码：

<!-- Main Layout Content -->
<md-content md-colors="accent">

    <!-- Tabs Layout -->
    <md-tabs md-selected="ctrl.tabSelected" md-stretch-tabs="always" class="md-primary" md-dynamic-height md-border-bottom>

        <!-- Home Tab -->
        <md-tab>

            <!-- Home Tab Label -->
            <md-tab-label>
                <h2>
                    <md-icon md-svg-src="media/image/icon/home.svg"></md-icon>
                    <span hide show-gt-sm>
                        &nbsp;Home
                    </span>
                </h2>
            </md-tab-label>

            <!-- Home Tab Body -->
            <md-tab-body>

                <!-- Home Tab Banner -->
                <div layout="column" layout-align="start center" style="overflow-y: hidden; max-height: 275px; text-align: center; background-color: #000;">
                    <div id="banner-title" style="position: absolute;">
                        <img src="media/image/icon/logo-white-192x192.png" alt="GustDive Logo" />
                        <span hide show-gt-xs>
                            <br />
                            <h1 style="font-size: 50px; color: white; text-shadow: 0 0 10px white; letter-spacing: 15px;" flex>
                                GustDive
                            </h1>
                        </span>
                    </div>
                    <video loop muted autoplay style="width: 100%;">
                        <source src="media/video/underwater-720p.mp4" type="video/mp4">
                        <source src="media/video/underwater-360p.mp4" media="(max-width: 640px)" type="video/mp4">
                    </video>
                </div>

                <!-- Home Tab Content -->
                <md-content layout="row" layout-xs="column" layout-wrap>

                </md-content>

            </md-tab-body>

        </md-tab>
    </md-tabs>

    <!-- Website Footer -->
    <div md-colors="{background: 'grey-A200'}" layout-padding>
        <div layout="row" layout-align="end center">
            <a target="_blank" href="https://www.padi.com" aria-label="Padi">
                <img src="media/image/icon/padi.png" alt="Padi" />
            </a>
            <a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g150793-d11888983-Reviews-GustDive-Puerto_Vallarta.html" aria-label="Trip Advisor">
                <img src="media/image/icon/trip-advisor.png" alt="Trip Advisor" />
            </a>
        </div>
        <div layout-align="center end" style="font-size: 12px; text-align: center;">Copyright © Jonathan-Gagne.com 2018</div>
    </div>

</md-content>

Answer 1

使用 object-fit: fill 使 Chrome 的宽度为 100%。不过，这不适用于 IE11（参见 caniuse）。

为什么我的视频在 Firefox 上拉伸而不是 Chrome？

Why my video stretching on Firefox but not on Chrome?

html

css

html5-video

angularjs