在剩余视口中引导4视频的完整高度和宽度

Question

您可以从视频下方的图片中看到

不在100％的高度。我如何获取视频以填补下面的剩余空间。

gcc test.c ext.c

[`

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
<div class="container-fluid h-100 red">
		<div class="row justify-content-left h-100">
			<div class="col-md-4 text-center" id="yellow">
				<h3 class="display-3">Sublime</h3>
				<h4 class="display-4">What we do.</h4>
				<p class="p-3 my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptates at provident fugiat ipsam voluptas illum quidem dolores pariatur, culpa, ab optio eum perferendis! Et magni doloremque voluptatem temporibus maiores?</p>
			</div>
			<div class="col-md-8 blue px-0">
				<!--mask color-->
				<div class="view">
					<!--video Source-->
					<video class="video-fluid" autoplay loop muted>
						<source src="/videos/171003A_009_2K.mp4" type="video/mp4"></source>
					</video>
					<div class="mask rgba-indigo-light"></div>
				</div>
			</div>
		</div>
	</div>

Answer 1

您的<video>标记具有此类

.video-fluid {
    width: 100%;
    height: auto;
}

width: 100%告诉浏览器使视频占用其分配宽度的100％，并且假设您将其放置在该侧面板的旁边，则它将从该面板的末端到末端浏览器。 heigh: auto会将高度设置为适合<video>的宽高比，因此，如果其高度为16：9，并且宽度为1600px，则高度为900px。

您也可以尝试将高度设置为100％，但是由于宽高比不同，因此会与您期望的不同。您可以将视频放大，然后将其居中放置在空白处，这样就不会看到所有视频，但会填满整个屏幕，而不会完全看不到。

Answer 2

正如其他人所说的...您可能不希望高度为100％，因为它会拉伸图像或内容会丢失。但是，您可以...通过增加一行来优化CSS，以获得最佳比率：

.video-fluid {
    max-width: 100%;
    width:auto;
    height: auto;
}