如何将图像从网格容器扩展到视口的边缘？

Question

我对网格布局中的背景图像有疑问。目前背景图像保留在容器内部，如下所示：

但是我希望图像像这样向左延伸到视口的边缘：

我似乎不知道该怎么做。到目前为止，这是我的代码：

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.flex-tier .grid-col-1 {
  position: relative;
  background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.flex-tier .grid-col-1,
.flex-tier .grid-col-2 {
  padding: 20px;
}

.container#grid-tier {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto;
}

<div id="grid-tier" class="flex-tier container ">
  <div class="grid-col-1">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
  <div class="grid-col-2">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
</div>

这里还有一个 jsfiddle 我的代码。任何解决方案将不胜感激！

Answer 1

您应该为图像使用另一个容器

<div id="image60"></div>
<div id="grid-tier" class="flex-tier container ">
  <div class="grid-col-1">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
  <div class="grid-col-2">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
</div>


.container {
  max-width: 1200px;
  margin: 0 auto;
}

#image60 {
  position: absolute;
  width: 60%;
  height: 100%;
  background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.flex-tier .grid-col-1 {
  position: relative;
  /*  background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;*/
  overflow: hidden;
}

.flex-tier .grid-col-1,
.flex-tier .grid-col-2 {
  padding: 20px;
}

.container#grid-tier {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto;
}

在jsfiddle

中查看

Answer 2

您的容器设置在 max-width:1200px; .
来自 children 的背景不应该显示在 parent 之外，也不会显示在他们自己之外。
您还可以将 overflow:hidden; 添加到 child，其中假设背景显示在视口左侧的容器边缘。

这不可能发生，您的代码运行完美。

您可以使用来自 child 的 absolute 伪，并根据坐标 top、right、bottom 调整大小并尝试设置坐标left 通过 calc() 匹配视口的左边缘。

编码思路是：

.flex-tier .grid-col-1 {
  position: relative;/* to be reference for absolute children and pseudos */
}

.flex-tier .grid-col-1::before {
  content: '';
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 60vw + 20px );/* where is the left edge about ? 
             start from the right (left:100% is equal to right:0 
             remove 60vw of the viewport that is the 60% ratio of your column at the minimum
             add your average margin */
  background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

低于工作演示或 fiddle

* {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  border:solid;
}

.flex-tier .grid-col-1 {
  position: relative;
}

.flex-tier .grid-col-1::before {
  content: '';
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 60vw + 20px );
  background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.flex-tier .grid-col-1,
.flex-tier .grid-col-2 {
  padding: 20px;
}

.container#grid-tier {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto;
}


below, the working demo or a [fiddle][1]

<div id="grid-tier" class="flex-tier container ">
  <div class="grid-col-1">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
  <div class="grid-col-2">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
        nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
        Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
        mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
    </div>
  </div>
</div>

如何将图像从网格容器扩展到视口的边缘？

How do you extend an image out of a grid container to the edge of the viewport?

html

css

background-image

css-grid