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

【问题标题】：Image link block takes up whole width of the page图片链接块占据页面的整个宽度
【发布时间】：2013-06-17 21:17:35
【问题描述】：

我有一个主要的div 作为宽度为 90% 的容器。在顶部的内部，我有一个标题（图像），带有 height: 5em、display: block 和 margin: auto。

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

当我点击图片左侧的方式时，我仍然可以点击链接。 我正在为此使用 Chrome。我在 Safari 和 Firefox 中对此进行了测试；同样的结果。 IE 和 Opera 仅在我的鼠标直接位于图片上方时才注册链接（这是我想要的）。我希望我能在所有浏览器中得到我想要的东西。谢谢。

编辑：这是一个示例：http://jsfiddle.net/Bionicrm/dXaAF/。

【问题讨论】：

我应该发布什么代码？
您正在谈论的代码，最好是 jsfiddle 或类似的工作示例
尝试通过css将链接的宽度设置为小百分比，以便链接适合图像尺寸，仅此而已。像一个{ width:5%}

标签： html css image hyperlink block

【解决方案1】：

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

【讨论】：

我将此标记为正确，但我没有设置背景图像，而是添加了图像。这是我的 jsFiddle：jsfiddle.net/Bionicrm/RENFz/1。它并不完美，但它非常接近于限制这些空间。

【解决方案2】：

尝试提供这些样式的链接

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

【讨论】：