有人能告诉我如何删除视频周围的所有空白吗。我想把视频拉伸到最后，然后填满整个容器。我试着去掉衬垫&保证金，但它似乎不起作用，我也不知道为什么。非常感谢。非常感谢。非常感谢。非常感谢。非常感谢。非常感谢。
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 'Poppins', sans-serif;
}
section {
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__bar {
margin-right: 50px;
}
header .logo {
position: relative;
max-width: 80px;
}
header ul {
position: relative;
display: flex;
}
header ul li {
list-style: none;
}
header ul li a {
display: inline-block;
color: #333;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
}
.content {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.content .textBox {
position: relative;
max-width: 600px;
}
.content .textBox h2 {
color: #333;
font-size: 4em;
line-height: 1.4em;
font-weight: 500;
}
.content .textBox h2 span {
color: #017143;
font-size: 1.2em;
font-weight: 900;
}
.content .textBox p {
color: #333;
}
.content .textBox a {
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
background: #017143;
color: #fff;
border-radius: 40px;
font-weight: 500;
letter-spacing: 1px;
text-decoration: none;
}
.content .imgBox {
width: 600px;
display: flex;
justify-content: flex-end;
padding-right: 50px;
margin-top: 50px;
}
.content .imgBox img {
max-width: 340px;
}
.thumb {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
}
.thumb li {
list-style: none;
display: inline-block;
margin: 0 20px;
cursor: pointer;
transition: 0.5s;
}
.thumb li:hover {
transform: translateY(-15px);
}
.thumb li img {
max-width: 60px;
}
.sci {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sci li {
list-style: none;
}
.sci li a {
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
filter: invert(1);
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #017143;
clip-path: circle(600px at right 800px);
}
.footer-dark {
padding: 50px 0;
color: #f0f9ff;
background-color: #282d32;
}
.footer-dark h3 {
margin-top: 0;
margin-bottom: 12px;
font-weight: bold;
font-size: 16px;
}
.footer-dark ul {
padding: 0;
list-style: none;
line-height: 1.6;
font-size: 14px;
margin-bottom: 0;
}
.footer-dark ul a {
color: inherit;
text-decoration: none;
opacity: 0.6;
}
.footer-dark ul a:hover {
opacity: 0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align: center;
padding-bottom: 20px;
}
}
.footer-dark .item.text {
margin-bottom: 36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom: 0;
}
}
.footer-dark .item.text p {
opacity: 0.6;
margin-bottom: 0;
}
.footer-dark .item.social {
text-align: center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align: center;
margin-top: 20px;
}
}
.footer-dark .item.social>a {
font-size: 20px;
width: 36px;
height: 36px;
line-height: 36px;
display: inline-block;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
margin: 0 8px;
color: #fff;
opacity: 0.75;
}
.footer-dark .item.social>a:hover {
opacity: 0.9;
}
.footer-dark .copyright {
text-align: center;
padding-top: 24px;
opacity: 0.3;
font-size: 13px;
margin-bottom: 0;
}
.video {
padding-bottom: 0!important;
margin-bottom: 0!important;
padding-top: 0!important;
margin-top: 0!important;
padding-right: 0;
object-fit: fill;
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/normalize.css">
<link rel="stylesheet" href="/styles.css">
<title>Starbucks</title>
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#"><img src="/images/logo.png" alt="" class="logo"></a>
<ul class="nav__bar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2>It's not just Coffee<br>It's <span>Starbucks</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, suscipit! Ut quos maiores doloremque delectus reiciendis optio assumenda esse consequuntur voluptates! Porro impedit cumque asperiores iste nam est maxime tempore, ducimus,
vitae ipsum rerum, necessitatibus fugit.</p>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<img src="/images/img1.png" class="starbucks">
</div>
</div>
<ul class="thumb">
<li><img src="/images/thumb1.png" onclick="imgSlider('/images/img1.png');changeCircleColor('#017143')"></li>
<li><img src="/images/thumb2.png" onclick="imgSlider('/images/img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="/images/thumb3.png" onclick="imgSlider('/images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li>
<a href="#"><img src="/images/facebook.png"></a>
</li>
<li>
<a href="#"><img src="/images/twitter.png"></a>
</li>
<li>
<a href="#"><img src="/images/instagram.png"></a>
</li>
</ul>
</section>
<section class="video">
<video autoplay muted loop src="/images/coffee.mp4"></video>
</section>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Company Name</h3>
<p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">Company Name © 2018</p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
function imgSlider(anything) {
document.querySelector('.starbucks').src = anything;
}
function changeCircleColor(color) {
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>
</body>
</html>现在就是这样
你能检查一下下面的代码吗？希望对你有用。您必须将最小高度、最小宽度和位置属性添加到视频元素，并将溢出属性添加到其父元素。
请参阅此链接：https://jsfiddle.net/yudizsolutions/vy2j84uw/1/
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 'Poppins', sans-serif;
}
section {
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__bar {
margin-right: 50px;
}
header .logo {
position: relative;
max-width: 80px;
}
header ul {
position: relative;
display: flex;
}
header ul li {
list-style: none;
}
header ul li a {
display: inline-block;
color: #333;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
}
.content {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.content .textBox {
position: relative;
max-width: 600px;
}
.content .textBox h2 {
color: #333;
font-size: 4em;
line-height: 1.4em;
font-weight: 500;
}
.content .textBox h2 span {
color: #017143;
font-size: 1.2em;
font-weight: 900;
}
.content .textBox p {
color: #333;
}
.content .textBox a {
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
background: #017143;
color: #fff;
border-radius: 40px;
font-weight: 500;
letter-spacing: 1px;
text-decoration: none;
}
.content .imgBox {
width: 600px;
display: flex;
justify-content: flex-end;
padding-right: 50px;
margin-top: 50px;
}
.content .imgBox img {
max-width: 340px;
}
.thumb {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
}
.thumb li {
list-style: none;
display: inline-block;
margin: 0 20px;
cursor: pointer;
transition: 0.5s;
}
.thumb li:hover {
transform: translateY(-15px);
}
.thumb li img {
max-width: 60px;
}
.sci {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sci li {
list-style: none;
}
.sci li a {
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
filter: invert(1);
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #017143;
clip-path: circle(600px at right 800px);
}
.footer-dark {
padding: 50px 0;
color: #f0f9ff;
background-color: #282d32;
}
.footer-dark h3 {
margin-top: 0;
margin-bottom: 12px;
font-weight: bold;
font-size: 16px;
}
.footer-dark ul {
padding: 0;
list-style: none;
line-height: 1.6;
font-size: 14px;
margin-bottom: 0;
}
.footer-dark ul a {
color: inherit;
text-decoration: none;
opacity: 0.6;
}
.footer-dark ul a:hover {
opacity: 0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align: center;
padding-bottom: 20px;
}
}
.footer-dark .item.text {
margin-bottom: 36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom: 0;
}
}
.footer-dark .item.text p {
opacity: 0.6;
margin-bottom: 0;
}
.footer-dark .item.social {
text-align: center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align: center;
margin-top: 20px;
}
}
.footer-dark .item.social>a {
font-size: 20px;
width: 36px;
height: 36px;
line-height: 36px;
display: inline-block;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
margin: 0 8px;
color: #fff;
opacity: 0.75;
}
.footer-dark .item.social>a:hover {
opacity: 0.9;
}
.footer-dark .copyright {
text-align: center;
padding-top: 24px;
opacity: 0.3;
font-size: 13px;
margin-bottom: 0;
}
.video {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding-right: 0;
object-fit: fill;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/normalize.css">
<link rel="stylesheet" href="/styles.css">
<title>Starbucks</title>
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#"><img src="/images/logo.png" alt="" class="logo"></a>
<ul class="nav__bar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2>It's not just Coffee<br>It's <span>Starbucks</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, suscipit! Ut quos maiores doloremque delectus reiciendis optio assumenda esse consequuntur voluptates! Porro impedit cumque asperiores iste nam est maxime tempore, ducimus, vitae
ipsum rerum, necessitatibus fugit.</p>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<img src="/images/img1.png" class="starbucks">
</div>
</div>
<ul class="thumb">
<li><img src="/images/thumb1.png" onclick="imgSlider('/images/img1.png');changeCircleColor('#017143')"></li>
<li><img src="/images/thumb2.png" onclick="imgSlider('/images/img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="/images/thumb3.png" onclick="imgSlider('/images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li>
<a href="#"><img src="/images/facebook.png"></a>
</li>
<li>
<a href="#"><img src="/images/twitter.png"></a>
</li>
<li>
<a href="#"><img src="/images/instagram.png"></a>
</li>
</ul>
</section>
<section class="video">
<video autoplay muted loop src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4"></video>
</section>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Company Name</h3>
<p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">Company Name © 2018</p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
function imgSlider(anything) {
document.querySelector('.starbucks').src = anything;
}
function changeCircleColor(color) {
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>
</body>
</html>