主页 / 问题 / 595657
Accepted
user3178479
Asked:2020-11-25 15:46:20 +0000 UTC2020-11-25 15:46:20 +0000 UTC

为什么裁剪了背景？

  • 772

使用和<meta name="viewport" content="width=1200">适应性 - 没有任何帮助。

布局是固定的。背景应该是屏幕的整个宽度（不是 .wrap）。但由于某种原因，当屏幕变窄时，背景被切断，甚至在包装纸上也没有。

请帮忙，我做错了什么，为什么会这样？

.wrap {
  width: 800px;
}

.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) no-repeat center center;
background-size: cover;
  -webkit-background-size: cover;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

html

2 个回答

  1. Best Answer

    除非指定了不同的宽度值，否则任何块都会占据父级的整个宽度。在你的情况下， .st 有一个主要的父母，而 main 有一个身体父母。主体的宽度等于窗口的宽度，除非另有说明。

    如果你运行你的代码，这是清晰可见的——正文有 margin: 8px 并且 .st 块的背景有相同的缩进。

    最佳解决方案由 Elena Semenchenko 提出，为 .st 或 main 设置最小宽度。您还可以为 .wrap 指定 display: table 或 display: inline-block，但在这种情况下，最好更详细地阅读规范以了解可能出现问题的地方。

    最小宽度

    main {
  min-width: 800px;
}
.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
    <main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

    显示：内联块

    .st {
  display: inline-block;
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
    <main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

    带显示器：表

    .st {
  display: table;
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
    <main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

    • 2 

  2. .wrap {
  width: 800px;
}

.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) no-repeat center center;
background-size: cover;
  -webkit-background-size: cover;
  
  min-width: 800px;
  width: 100%;
}
    <main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

    • 1

相关问题