Как сделать картинку ссылкой в html два простых способа.

В веб можно условно разделить ссылки на два типа, это текстовые и графические. В этой статье мы разберем как сделать картинку ссылкой в html с помощью обычного изображения, а так же в том случае если картинка в элементе будет в качестве фона.

Как сделать картинку ссылкой в html

Обычно картинка отображается с помощью тега img, что бы вставить картинку нужно добавить следующий код:

<img src="/image1.jpg" />

Тег img только отображает изображение, он не может ссылаться ни на что. Что бы сделать его ссылкой нам необходимо обернуть тег img тегом a. Ссылка вставляется следующим образом:

<a href="webupblog.ru/link-to-page">Content</a>

Теперь сложите это все и вы получите следующее:

<a href="webupblog.ru/link-to-page"><img src="/image1.jpg" /></a>

Фоновая картинка как ссылка в html

 

Есть ситуации когда картинка вставляется на страницу не с помощью html тега img, а с помощью css свойства background или background-image. Пользователь визуально может и не отличить как именно была добавлена картинка, но браузер увидит разницу. В таком случае мы тоже можем сделать изображение ссылкой. Давайте рассмотрим пример как это сделать.

Для начала нужно добавить на страницу div в див добавить элемент a, этим тегам добавим классы для более удобной стилизации.

<div class="box-image">
 <a href="webupblog.ru/link-to-page" class="link-image"></a>
</div>

Далее добавляем фоновое изображение, в css пишем классу .box-image привила:

.box-image {
  width: 200px;
  height: 200px;
  background-image: url("/image1.jpg");
  background-size: 200px 200px;
  background-position: top left;
  position: relative;
}

Картинку мы вставили с помощью background-image, а position: relative; добавили что бы ссылку растянуть на всю ширину и высоту блока.

.box-image {
  width: 200px;
  height: 200px;
  background-image: url("/image1.jpg");
  background-size: 200px 200px;
  background-position: top left;
  position: relative;
}
.link-image {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

Таким способом мы имитировали типичное поведение ссылки в которой есть изображение. Если у вас остались вопросы как сделать картинку ссылкой, после наших примеров, вы можете задать их в комментариях.