时间戳

首页 > 解决方案 > 链接的面积大于图片

html - 链接的面积大于图片

问题描述

我正在尝试将一些图像放到我的网站上，这些图像将作为指向我页面另一部分的超链接。问题是，当我使用<a>标签和<img>标签时，标签在其左侧<a>过度扩展，使可点击区域成为我不希望可点击的区域的一部分。<img>我想将<a>标签保持在<img>.

这是我的代码：（对不起，但由于我对这一切都不熟悉，我不知道如何以任何其他方式发布它）

.firstproject {			
   height: 100px;
   width: 100px;
   background-color: red;
   margin-left: 100px;
}
<p><a class="firstproject" href="https://www.youtube.com/"><img 
class="firstproject" src="front.jpg"></a></p>

希望你能弄清楚！

PS：我使用了红色背景，因此该区域将可见并且可以更好地看到它的扩展。PS2：我使用“youtube”地址作为链接示例

标签： htmlcssimageanchor

解决方案

您可以应用display: inline-block到您的a标签，这将为您提供预期的结果。

将图像包含在标签集 imageswidth中100%

 
.firstproject {			
   height: 100px;
   width: 100px;
   background-color: red;
   display: inline-block;
}
.firstproject > img {
   width: 100%'
}
p {padding-left: 100px;}
<p><a class="firstproject" href="https://www.youtube.com/"><img 
class="firstproject" src="front.jpg"></a></p>

编辑：a要向右 推，您可以将 padding-left 添加到它的父级

p {
    padding-left: 100px;
}

推荐阅读