时间戳

首页 > 解决方案 > 超链接图像

html - 超链接图像

问题描述

鉴于我当前的代码，我将如何对图像进行超链接，以便当用户单击图像时，浏览器会打开一个新选项卡并显示图像？

body {
  margin: 0;
  padding: 0;
}

.img {
  display: grid;
  height: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}
<div class="img"> <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg'></div>

标签： htmlcss

解决方案

这是最简单的方法。

<a href='https://anywebsite.com/home'> 
    <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg' />
</a>

您可以将锚标记 ( <a href='...'> </a>) 包裹在任何东西上，它会将其超链接到任何东西。

您也可以添加<a href='...' target='_blank' </a>，它会

推荐阅读