我制作了一个响应式照片网格,其中每个网格项目都用作带有文本覆盖层的图像的容器。然后,链接将跨越网格项目以进行导航。网格项会拍摄具有不同长宽比的图像,保留长宽比,并裁剪掉多余的部分以填充网格框。
仅使用CSS网格或flexbox的最佳方法是什么?
我在下面发布了两种不同的方法,并且都可以使用,但是哪种方法最正确?可以在<a>
标签内插入图片吗?在2019年使用绝对定位是一件坏事吗?我应该使用ul
代替div吗?
绝对定位:
html {
font-family:arial;
font-size: 100%;
color: #CCC;
}
*{box-sizing: border-box;}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
position: absolute;
left: 0;
top: 0;
margin: 0;
background-color:#000;
padding:10px 14px;
opacity: .8;
}
.tile a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
text-decoration: none;
width: 100%;
height: 100%;
z-index: 1;
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#"></a>
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
</section>
链接中包裹的图片:
html {
font-family:arial;
font-size: 100%;
color: #CCC;
}
*{box-sizing: border-box;}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
position: absolute;
left: 0;
top: 0;
margin: 0;
background-color:#000;
padding:10px 14px;
opacity: .8;
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
</section>
P.S。无论如何,是否可以使文本叠加层居中并使其水平扩展到网格项目框?
答案 0 :(得分:1)
使用 positioning 非常好,我喜欢将img
包装在a
元素内。无论如何,这是一种不使用定位但在tile
上使用内部网格的方法:
使每个tile
成为网格容器
使用h4
和a
将grid-row: 1
和grid-column: 1
都明确地放在第一行和第一列中。 p>
现在您可以将align-self: flex-start
添加到h4
并将其放置在顶部(可以调整align-self
进行垂直定位)
请参见下面的演示
html {
font-family: arial;
font-size: 100%;
color: #CCC;
}
* {
box-sizing: border-box;
}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
display: grid; /* an inner grid */
}
.tile a {
grid-row: 1; /* place in first row */
grid-column: 1; /* place in first column */
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
margin: 0;
background-color: #000;
padding: 10px 14px;
opacity: .8;
grid-row: 1; /* place in first row */
grid-column: 1; /* place in first column */
align-self: flex-start; /* take auto-width */
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
</section>