如何在照片网格中的网格项目上放置链接和文本

Question

我制作了一个响应式照片网格，其中每个网格项都用作带有文本叠加层的图像的容器。一个链接然后跨越网格项目以进行导航。网格项采用不同纵横比的图像，保留纵横比并剪掉多余的部分以填充网格框。

仅使用 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>

附：有没有办法让文本覆盖居中并使其水平扩展到网格项目框？

Answer 1

使用定位 非常好，我喜欢将img 包裹在a 元素中。无论如何，这是一种不使用定位但在tile上使用内部网格的方法：

• 使每个tile 成为一个网格容器

• 使用grid-row: 1 和grid-column: 1 将h4 和a 明确放入第一行和第一列。

• 现在您可以将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>