Question

我有一个视频而且我想改变高度并保持相同的宽度例如全屏幕上的宽度我认为是100％和高度仅200px与本网站相同www.paypal.com 问题是当我改变高度宽度时也会自动改变，并且视频转到中心（水平拉伸）

        <video autoplay class="embed-responsive-item">
          <source src=test.mp4 type=video/mp4>
        </video>

视频{宽度：100％;身高：200px; }

感谢提前任何帮助

Answer 1

PayPal网站使用CSS属性<s:if test="apple">来使视频的宽度相同。

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fit: cover

.hero-home video { display: block; height: 100%; width: 100%; top: 0px; position: absolute; left: 0px; z-index: -1; object-fit: cover; /* this makes it fit within the video container */ opacity: 0.9; transition: opacity 0.3s ease 0s; }

的可能值

object-fit

他们还在/* Keyword values */ object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; /* Global values */ object-fit: inherit; object-fit: initial; object-fit: unset;元素的某些父元素上混合使用max-width，min-width和min-height。

只需检查一下CSS，看看他们在做什么。您会看到视频的一部分被隐藏，而不会使用<video>在.video-container上显示视频的所有高度。

Answer 2

您好，您可以为视频所在的容器提供宽度和高度，然后给出像这样的视频元素min-width / height，视频将保留在中心，只有宽度会改变，而不是高度。

.container {
    width: 100%;
    height: 100%;
}
video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 200px;
    width: auto;
    height: auto;
}

更改视频的高度并保持相同的宽度

2 个答案: