[英]How can I have one large image over several smaller adjoining divs
I have a table-like bunch of divs exposed as follow:我有一堆像桌子一样的 div,如下所示:
This is the HTML:这是 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>
The image layout above was produced by the following css:上面的图像布局是由以下 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;
}
which can be easily replaced as needed.可以根据需要轻松更换。
I need to place an image over greyed divs (2, 3, 4, 6, 7, 8, 10, 11, 12) keeping the whole thing responsive我需要将图像放在灰色的 div(2、3、4、6、7、8、10、11、12)上,以保持整个事物的响应
As read somewhere, I tried the " background-attachment: fixed;
" approach which is not working when scrolling down the page在某处阅读时,我尝试了“ background-attachment: fixed;
”方法,该方法在向下滚动页面时不起作用
How to achieve this?如何实现这一目标?
It looks as though you have a grid, with the right hand upper items as one larger item.看起来好像您有一个网格,右侧上方的项目是一个较大的项目。
If the image is to cover the items you have shown grayed out then there is no need to have them as separate cells and you can use CSS grid's template-area system to create the grid, with the image set as a background to the second cell.如果图像要覆盖您显示为灰色的项目,则无需将它们作为单独的单元格,您可以使用 CSS 网格的模板区域系统创建网格,并将图像设置为第二个单元格的背景.
Here's a simple snippet showing that.这是一个简单的片段,显示了这一点。 Note that the grayed out divs have been removed from the HTML as have the row divs as CSS grid will take care of that:请注意,灰色的 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>
Obviously you will want to alter the sizes/aspect ratio of the container to suit your application.显然,您需要更改容器的尺寸/纵横比以适合您的应用。
If you're looking into another option other than Javascript this can be achieved with CSS Grid layout using Column and Row spans.如果您正在寻找除 Javascript 之外的其他选项,这可以通过使用列和行跨度的 CSS 网格布局来实现。 Quick example, I have only 8 grid items because where the image resides, it takes up all those cells.快速示例,我只有 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.