可点击区域扩展为容器(图像)

时间:2012-11-17 00:58:58

标签: css

我在链接中设置图像,除了可点击区域扩展到整个容器(图像的父级)外(图像中的橙色部分)

Screenshot of the clickable zone

这是关于这个问题的代码的一部分(我没有全部插入,所有图像都有相同的问题。):

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;
}

还有link of the site

1 个答案:

答案 0 :(得分:0)

为什么要将显示设置为阻止?如果你删除它并让我认为是内联块的默认值它修复它。如果你想让它居中,你可以使用其他方法。