爲什麼我的圖像超鏈接可以遠離實際圖像大幅度點擊？

圖片周圍的框是圖片的實際大小。圖片可以從兩側的端點一路點擊。這在我們的網站上不止一次發生，所以這是一個趨勢，我只是無法弄清楚什麼。我想剛纔的圖片本身可以點擊爲什麼我的圖像超鏈接可以遠離實際圖像大幅度點擊？

<hr noshade> 
<a href="website.html"> 
<center> <img src="torqafflogo.png" alt="homepage" align=center height="215" width="215" border="0"> </center> 
</a> 
<hr noshade>

來源

2017-07-31 Torq

我會建議你在一些圖像編輯器（甚至是在線）中剪輯你的圖像，因爲通過CSS剪裁是可能的，但我沒有看到這方面的意義。你必須指定剪輯的座標來通過CSS來完成這一點，我已經看到很多在線編輯器，你可以使用座標剪裁圖片，並且你會擺脫hacky代碼。 –

除非你得到的原始圖像剪切（通過Photoshop或這樣的工具），這裏是你能做什麼 -

1.Put這些圖像在容器中。例如 -

.roundImageWrapper img{ 
    position : absolute; 
    top : 0; /* Adjust as per need*/ 
    left : 0; /* Adjust as per need*/ 
}

這 -

<span class="roundImageWrapper"><img src="torqafflogo.png" alt="homepage" /></span>

2.適用風格到周圍的包裝元素使用top和適當的值left按照需要

.roundImageWrapper{ 
    position : relative; 
    height : 100px; 
    width : 100px; 
    border-radius : 50%; /*Make it round*/ 
    -moz-border-radius : 50%; 
    overflow : hidden; /*clip anything outside the circle*/ 
}

3.Position圖像內.roundImageWrapper如果所有這些圖像具有相似的尺寸將會很容易。否則，您將不得不對樣式進行調整以調整位置。

最後，綁定roundImageWrapper而不是圖片上的點擊事件。

來源

2017-07-31 23:55:49 Vandesh

爲什麼我的圖像超鏈接可以遠離實際圖像大幅度點擊？

回答

相關問題