Как разместить ссылки и текст поверх элементов сетки в сетке фотографий

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>

PS В любом случае можно ли разместить текстовое наложение по центру и развернуть его горизонтально в поле элемента сетки?

Answer 1

Использование позиционирование очень хорошо, и мне нравится оборачивать img внутри элемента a.В любом случае, здесь есть подход, который не использует позиционирование , но использует внутреннюю сетку на tile:

• сделайте каждый tile a контейнер сетки

• поместите h4 и a в первую строку и первый столбец явно используя grid-row: 1 и grid-column: 1.

• , теперь вы можете добавить 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>