我正在使用 flexbox atm，但解决方案不一定与 flexbox 相关。
这些 r 代码片段:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<a href="#"><span>Mission</span></a>
<a href="#"><span>Featured Tea</span></a>
<a href="#"><span>Locations</span></a>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</body>
</html>我将背景图像放入 .mission div。但它并没有显示整个图片，它只显示了它的一个片段。如何使 div 环绕完整图片？这是它的样子 rn:
我知道我可以让图片的尺寸与 div 的高度和宽度相匹配，但我试图通过其他方式实现它。请向我解释你做了什么以及为什么并随时纠正错误(我还在学习^^)
最佳答案
看不到你的图片，因为它们不是在线托管的，但我认为可以添加 background-size: cover 到你的背景图片
.mission {
background-image: url(../images/img-mission-background.jpg);
background-size:cover;
background-position: center;
...
}
但是如果容器不够大，您可以尝试将图像添加到容器中并设置它的可见性:隐藏，这样容器可以保持图像尺寸，但它仍然会显示漂亮的背景图像
关于html - 如何将div包裹在FULL图片周围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49560999/