Question

我正在使用HTML＆amp; CSS尝试制作居中的图像，当您单击它时，它会为您提供完整尺寸的版本。该图像也可以扩展，因此可以缩小尺寸。现在我不担心客户的带宽。我遇到的问题是可点击区域位于图像之外，这使得它看起来像是某种不可见的链接。

这就是我的意思。 problem image

我有箭头的所有区域，用户都可以点击 - 但这没有意义。我只是希望图像可以点击。我可以让它工作，但我必须在标签上使用内联块，这会根据屏幕的宽度破坏缩放。

以下是此部分的HTML。

<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>

和CSS。

.content a:link.image_link { /*Not overqualified - overrides stuff on main.css. gets rid of the underline*/
    border-bottom: 0px none transparent;
    text-decoration: none;
    display:block;
}

.content .popout_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 8px 8px 10px #555;
    margin-bottom: 10px;
    max-width: 100%;
    min-width: 100px;
}

.content .scalable_image {
    min-width: 100px;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

为了验证此信息，这里分别是firefox中链接和图像的计算值（第一个图像错误地显示了内联块，我在测试中拍摄了这个图像，它实际上是块 - 但这两个值都引入了错误，没有 - 缩放或太大而无法点击）： link stats img stats

我觉得我错过了一些非常明显的东西。我不能谷歌这个因为“图片链接”似乎非常通用。

Answer 1

你可以这样做：

JSFiddle - DEMO

<强> HTML：

<div class="content">
    <a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a>
<div>

<强> CSS：

.content {
    text-align: center; /* add this */
}
.content a:link.image_link {
    border-bottom: 0px none transparent;
    text-decoration: none;
    display: inline-block; /* add this */
}
.content .popout_image {
    display: block;
    box-shadow: 8px 8px 10px #555;
    margin-bottom: 10px;
    max-width: 100%;
    min-width: 100px;
}
.content .scalable_image {
    min-width: 100px;
    max-width: 100%;
    height: auto;
    width: auto\9;
}

Answer 2

这个怎么样？

<a href="#">
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</a>

a {display:inline-block;width:80%; height:auto}

img {width:100%}

http://jsfiddle.net/ko2wzah9/

Answer 3

据我了解，你需要这样

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>image link</title>
    </head>
    <body>
      <a href="http://lorempixel.com/700/700" class="image-link">
        <img src="http://lorempixel.com/300/300" alt="">
      </a>
    </body>
    </html>

和css

a{
  display: inline-block;
  position: static;
}

a img{
  position: relative;
  z-index: 2;
}

a:before{
  content: '';
  position: fixed;
  background: rgba(031, 031, 031, 0.7);
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

the example

可扩展的中心图像链接

3 个答案: