图片链接块占据页面的整个宽度

我有一个主要div作为宽度为 90% 的容器。在顶部里面，我有一个标题（图片）height: 5em, display: block, and margin: auto.

我的 HTML 代码设置如下：<a href=""><img scr=""></a>.

当我单击图片左侧时，我仍然可以单击该链接。我为此使用 Chrome。我在中测试了这个Safari and Firefox;相同的结果。IE and Opera仅当我的鼠标直接位于图片上时才注册链接（这就是我想要的）。我希望我能得到我想要的all浏览器。谢谢。

Edit: 这是一个例子：http://jsfiddle.net/Bionicrm/dXaAF/ http://jsfiddle.net/Bionicrm/dXaAF/.

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

您可以在整个事物周围放置一个包装器，指定您想要显示的大小：

Example:

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