圖像鏈接塊佔用整個頁面的寬度

我有一個主要的div作爲寬度爲90％的容器。在頂部，我有一個標題（圖片）height: 5em,display: block和margin: auto。圖像鏈接塊佔用整個頁面的寬度

我的HTML代碼是這樣設置的：<a href=""><img scr=""></a>。

當我點擊圖片左側的方式時，我仍然可以點擊鏈接。 我爲此使用Chrome。我在Safari和Firefox;相同的結果。 IE and Opera只有當我的鼠標直接在圖片上（這是我想要的）才註冊了鏈接。我希望我可以得到我想要的全部瀏覽器。謝謝。

編輯：下面是一個例子：http://jsfiddle.net/Bionicrm/dXaAF/。

來源

2013-06-20 T.J. Mazeika

我應該發佈什麼樣的代碼？ –

你正在談論的代碼，最好是在jsfiddle或類似的 – Turnip

的工作示例嘗試設置鏈接的寬度爲一個小的百分比的CSS，以便該鏈接將適合圖像的維度，沒有更多。像一個{寬度：5％} – kawashita86

http://jsfiddle.net/derekstory/K7Vwd/

你可以把一個包裝圍繞整個事情並指定要顯示的大小：

例子：

HTML

<div id="wrap"> <a id="test" href="test.com"> 
     <div id="image"> 

     </div> 
    </a> 
</div>

CSS

body, html { 
    height: 100%; 
} 
#test { 
    height: 200px; 
    width: 200px; 
} 
#image { 
    background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg"); 
    height: 100%; 
    width: 100%; 
    background-size: 100%; 
} 
#wrap { 
    width: 200px; 
    height: 150px; 
}

來源

2013-06-20 20:59:31

我標記爲正確的，但不是設置背景圖像，我仍然添加圖像。這是我的jsFiddle：http://jsfiddle.net/Bionicrm/RENFz/1/。這並不完美，但它非常接近於限制這些空間。 –

先給鏈接這些樣式

display:block; 
width:100px; //or whatever you want 
height:5em; 
position:relative; 
margin:auto;

來源

2013-06-20 20:54:23

圖像鏈接塊佔用整個頁面的寬度

回答

相關問題