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

Question

我有一堆像桌子一樣的 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; ”方法，該方法在向下滾動頁面時不起作用

如何實現這一目標？

Answer 1

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

如果圖像要覆蓋您顯示為灰色的項目，則無需將它們作為單獨的單元格，您可以使用 CSS 網格的模板區域系統創建網格，並將圖像設置為第二個單元格的背景.

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

 #container { width: min(600px, 100vmin); height: min(300px, 50vmin); display: grid; grid-template-areas: "ABBB" "CBBB" "DBBB" "EFGH"; } #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>

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

Answer 2

如果您正在尋找除 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>