图像链接块占用整个页面宽度 [英] Image link block takes up whole width of the page

问题描述

我有一个主要的 div 作为宽度为90％的容器。在顶部，我有一个标题（图片），其中 height：5em ， display：block 和 margin：auto 。

我的HTML代码是这样设置的：< a href = >< img scr =>< / a> 。

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

编辑：以下是一个例子： http://jsfiddle.net/Bionicrm/dXaAF/ 。

解决方案

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

你可以在整个事物中放置一个指定你想要显示的尺寸的包装：

例子：

HTML

 < div id =wrap> < a id =testhref =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）; 
身高：100％; 
宽度：100％; 
 background-size：100％; 
} 
 #wrap {
 width：200px; 
 height：150px; 
} 
  

I have a main div as a container with a width of 90%. Inside at the top, I have a title (image) with height: 5em, display: block, and margin: auto.

My HTML code is set up like so: <a href=""><img scr=""></a>.

When I click way to the left of the picture, I am still able to click on the link. I am using Chrome for this. I tested this in Safari and Firefox; same result. IE and Opera only registered the link when my mouse was directly over the picture (which is what I want). I'm hoping I can get what I want in all browsers. Thanks.

Edit: Here's an example: http://jsfiddle.net/Bionicrm/dXaAF/.

解决方案

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

You can put a wrapper around the entire thing specifying the size you want shown:

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

这篇关于图像链接块占用整个页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！