Question

我正在使用flexbox atm，但解决方案不一定必须与flexbox相关。

这些代码片段：

＆＃13;

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;

}

＆＃13;

<!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>

＆＃13;

我将一个background-img放到.mission div中。但它并没有显示整个画面，它只显示了它的剪辑。如何使div包围FULL图片？这就是它的样子：

我知道我可以把图片的尺寸与div的高度和宽度相匹配，但我试图以其他方式实现它。请向我解释你做了什么以及为什么并随意纠正错误（我还在学习^^）

Answer 1

无法查看您的图片，因为它们并非在线托管，但我认为可能会为您的背景图片添加背景尺寸：封面

.mission {
  background-image: url(../images/img-mission-background.jpg);
  background-size:cover;
  background-position: center;
  ...
}

但是如果容器不够大，你可以尝试将图像添加到容器并设置它的可见性：隐藏，这样容器保持图像尺寸，但它仍然会有美丽的背景图像显示

Answer 2

不确定是否可以使用背景图片，但您可以使用ggplot(data = t1) + geom_segment(aes(x = 0, xend = years, y = y2001, yend = y2016, color=incr)) + scale_fill_manual(values=c("black", "red")) + facet_grid(type~.)标记，这会导致<img> div扩展图像的完整大小。你需要做一些绝对的定位调整，以便在img：

之上叠加文本

.mission

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%;
}

header img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;

}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%, -50%);
  width: 1200px;
}
.mission-banner {
  position: absolute;
  z-index: 2;
}
.mission img {
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -425px;
}

Answer 3

您已将图片添加为背景图片。所以“包含”图片的元素对图片的尺寸一无所知。

您可以将“background-size”属性添加到.mission，其值为“cover”，以便图像覆盖整个div。或使用值“包含”来显示图像完整。

.mission {
  background-image: url(../images/img-mission-background.jpg);
  background-size: contain;
  background-position: center;
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 1200px;
}

要使.mission容器更大，你必须定义.mission的宽度和高度。

另一种方法是在.mission中将图像添加为img标记，并将.mission absolute的内容放在图像的顶部。但也许这是一个有点线的解决方案;）

如何将div包裹在FULL图片周围

3 个答案: