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

时间：2019-04-06 07:01:50

标签： html css css3 css-grid

我制作了一个响应式照片网格，其中每个网格项目都用作带有文本覆盖层的图像的容器。然后，链接将跨越网格项目以进行导航。网格项会拍摄具有不同长宽比的图像，保留长宽比，并裁剪掉多余的部分以填充网格框。

仅使用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。无论如何，是否可以使文本叠加层居中并使其水平扩展到网格项目框？

1 个答案:

答案 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>

相关问题
最新问题