我已经在链接中设置了图像,它可以工作,除了可点击区域扩展到整个容器(图像的父级)。(下图中的橙色部分)
这是有关此问题的代码部分(我没有将所有内容都放入其中,所有图像都有相同的问题。):
HTML:
<a href="img/tableau/tableau-01.jpg">
<img src="img/tableau/tableau-01.jpg" alt="tableau 01"/>
</a>
<a href="img/tableau/tableau-02.jpg">
<img src="img/tableau/tableau-02.jpg" alt="tableau 02"/>
</a>
<a href="img/tableau/tableau-02.jpg">
<img src="img/tableau/tableau-03.jpg" alt="tableau 03"/>
</a>
CSS:
#container {
position: relative;
margin: 0 auto;
width: 960px;
height: 900px;
}
img {
height: 50%;
width: 50%;
max-width: 100%;
border: 1px rgba(255, 255, 255, 0.1) solid;
margin: 0 auto;
display: block;
-webkit-transition: all ease-in 0.13s;
-moz-transition: all ease-in 0.13s;
-o-transition: all ease-in 0.13s;
-ms-transition: all ease-in 0.13s;
transition: all ease-in 0.13s;
margin-bottom: 25px;
}
还有网站的链接