如何在幾個較小的相鄰div上擁有一張大影像

我有一堆像桌子一樣的 div，如下所示：

這是 HTML：

<div id='container'>
  
  <div class='row'>
    <div class='smaller'>1</div><div class='smaller image'>2</div><div class='smaller image'>3</div><div class='smaller image'>4</div>
  </div>
  
  <div class='row'>
    <div  class='smaller'>5</div><div class='smaller image'>6</div><div class='smaller image'>7</div><div class='smaller image'>8</div>
  </div>
  
  <div class='row'>
    <div  class='smaller'>9</div><div class='smaller image'>10</div><div class='smaller image'>11</div><div class='smaller image'>12</div>
  </div>      
  
  <div class='row'>
    <div  class='smaller'>13</div><div class='smaller'>14</div><div class='smaller '>15</div><div class='smaller '>16</div>
  </div>            
  
</div>

上面的影像布局是由以下 css 生成的：

#container {
  background-color:yellow;
  text-align: center;
}

#container .row .smaller {
  background: white;
  border:  1px solid grey;        
  display: inline-block;
  width: 20%;      
}

#container .row .smaller.image {
  background: lightgrey;
}

可以根據需要輕松更換。

我需要將影像放在灰色的 div（2、3、4、6、7、8、10、11、12）上，以保持整個事物的回應

在某處閱讀時，我嘗試了“ background-attachment: fixed;”方法，但在向下滾動頁面時不起作用

如何實作這一目標？

uj5u.com熱心網友回復：

看起來好像您有一個網格，右側上方的專案是一個較大的專案。

如果影像要覆寫您顯示為灰色的專案，則無需將它們作為單獨的單元格，您可以使用 CSS 網格的模板區域系統來創建網格，并將影像設定為第二個單元格的背景.

這是一個簡單的片段，顯示了這一點。請注意，灰色的 div 已從 HTML 中洗掉，行 div 也已洗掉，因為 CSS 網格將處理該問題：

#container {
  width: min(600px, 100vmin);
  height: min(300px, 50vmin);
  display: grid;
  grid-template-areas: "A B B B" "C B B B" "D B B B" "E F G H";
}

#container>div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
}

#container :nth-child(1) {
  grid-area: A;
}

#container :nth-child(2) {
  grid-area: B;
  background-image: url(https://picsum.photos/id/1016/200/300);
  background-size: cover;
  background-position: center center;
}

#container :nth-child(3) {
  grid-area: C;
}

#container :nth-child(4) {
  grid-area: D;
}

#container :nth-child(5) {
  grid-area: E;
}

#container :nth-child(6) {
  grid-area: F;
}

#container :nth-child(7) {
  grid-area: G;
}

#container :nth-child(8) {
  grid-area: H;
}

<div id='container'>
  <div>1</div>
  <div>2</div>
  <div>5</div>
  <div>9</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

顯然，您需要更改容器的尺寸/縱橫比以適合您的應用。

uj5u.com熱心網友回復：

如果您正在尋找除 Javascript 之外的其他選項，這可以通過使用列和行跨度的 CSS 網格布局來實作。快速示例，我只有 8 個網格項，因為影像所在的位置占據了所有這些單元格。

.grid {
  display: grid;
  grid-template-columns: repeat(4, [col] 1fr);
  grid-template-rows: repeat(4, [row] 100px );
}
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.grid-item-image {
  background-image: url("https://via.placeholder.com/1000x500");
  background-size: cover;
  background-position: center center;
  grid-column: col 2 / span 3;
  grid-row: row 1 / span 3;
}
.responsive-img {
  width: 100%;
}

<div class="grid">
  <div class="grid-item item-1">1</div>
  <div class="grid-item item-2">5</div>
  <div class="grid-item item-3">9</div>
  <div class="grid-item item-4">13</div>
  <div class="grid-item item-5">14</div>
  <div class="grid-item item-6">15</div>
  <div class="grid-item item-7">16</div>
  <div class="grid-item grid-item-image"></div>
</div>

標籤：javascript css

上一篇：為什么在將類添加到元素時沒有應用我的CSS？

下一篇：如何在html和css中重新創建這個形狀？[復制]