css - 如何在屏幕上拉伸(stretch)布局但保持内容更窄？

Question

快速提问:

如何创建一个布局，其中所有元素的背景都横跨屏幕的宽度，但内容保持狭窄，比如说 1000 像素？我正在寻找类似这样的东西:

https://themeforest.net/item/itcore-site-template/3638733

郑重声明，我知道如何编码，只是不知道最好的方法是什么。我确信有一个“最佳实践”可以实现这一点，并且我只构建了 100% 宽度的仪表板，但我从未使用过它。

有什么建议吗？

Answer 1

您只需组合两个元素，一个适合窗口(您可以在其上应用一些背景和覆盖视口(viewport)的其他样式)，另一个位于页面中央的容器。我建议您使用 max-width 以允许它在较小的设备上缩小。

<div class="section">
  <div class="wrapper">
    Some content
  </div>
</section>

那么你的 CSS 就这么简单

.section {
  background: (...)
  background-size: cover; /* stretch to cover the whole container */
}

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}