Kľúčová zóna sa rozširuje na kontajner (obrázok) - css

Nastavil (-a) obrázky v odkazoch a funguje to s tým rozdielom, že zóna, na ktorú sa dá kliknúť, rozširuje na celý kontajner (rodič obrázka.) (Oranžová časť na obrázku nižšie)

Screenshot zóny, ktorú možno kliknúť

Tu je tá časť kódu týkajúca sa tohto problému (nemám všetko v ňom, všetky obrázky majú rovnaký problém.):

HTML:

<a href="img/tableau/tableau-01.jpg">
<img src="/images/img/tableau/tableau-01.jpg" alt="tableau 01"/>
</a>

<a href="img/tableau/tableau-02.jpg">
<img src="/images/img/tableau/tableau-02.jpg" alt="tableau 02"/>
</a>

<a href="img/tableau/tableau-02.jpg">
<img src="/images/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;
}

A tam je odkaz na lokalitu

odpovede:

prečo ste nastavili zobrazenie na blokovanie? ak toto odstránite a nechajte predvolené nastavenie, ktoré si myslím, že je inline-block to opraví. Ak chcete centrovať, môžete použiť iné metódy.