Ссылка не растягивается на всю вложенную картинку

Question

a {
  text-decoration: none;
  border-width: thin;
  border-style: dotted;
  color: blue;
}
.img {
  margin: 50px;
  padding: 0px;
  height: 250px;
  width: 250px;
  border-radius: 40px;
  box-shadow: 0px 0px 5px #ccc;
}
.img-center {
  text-align: center;
  padding-left: 15%;
  padding-right: 15%;
}

<div class="img-center">
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpgg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpgg" title="Перейти" class="img"></a>
  <a href="1.html" target="_blank"><img src="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634-750x450.jpg" title="Перейти" class="img"></a>
</div>

На странице под картинкой появляется вторая ссылка, но при этом картинка тоже является ссылкой... display: block нельзя использовать потому что должно быть несколько фото на одном уровне

Answer 1

пример лучше смотреть на всю страницу

<!DOCTYPE HTML>
<html>
 <head>
  <style>
    a {
      display: inline-block;
      position: relative;
      text-align: center;
      text-decoration: none; 
      border-top; 
      border-width:thin;
      border-style:dotted;
      height: 350px;
    }

    .img {
      margin: 50px;
      padding: 0px;
      height: 250px;
      width: 250px;
      border-radius: 40px;
      box-shadow: 3px 3px 5px #ccc;
    }

    .img-center {
      text-align: center;
    }

    h2 {
      position  : relative;
      top       : -200px;
      left      : 0;
      width     : 100%;
      color: white;
    }
  </style>
 </head>
 <body>
            <div class="img-center">
                <a href="1.html" target="_blank">
                <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"  class="img">
                <h2>Перейти</h2>
                </a>
              
            
            
                <a href="1.html" target="_blank">
                <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"  class="img">
                <h2>Перейти</h2>
                </a>
              
            </div>
 </body> 
</html>

БЛОГ НА HUSL

Ссылка не растягивается на всю вложенную картинку

Ответы (1 шт):