Html 可扩展、居中的图像链接_Html_Css_Image

Html 可扩展、居中的图像链接

html css image

Html 可扩展、居中的图像链接,html,css,image,Html,Css,Image,我正在使用HTML和CSS来制作一个居中的图像，当你点击它时，它会给你一个全尺寸的版本。图像也可缩放，因此在较小的设备上可以缩小。现在我不担心客户端的带宽。我遇到了一个问题，可点击区域位于图像之外，这使得它看起来像是有某种不可见的链接这就是我的意思所有我有箭头的区域，用户都可以点击——但这没有意义。我只希望图像是可点击的。我可以让它工作，但我必须在a标记上使用内联块，这会破坏取决于屏幕宽度的缩放这是这部分的HTML <a class="image_link" href="/image

我正在使用HTML和CSS来制作一个居中的图像，当你点击它时，它会给你一个全尺寸的版本。图像也可缩放，因此在较小的设备上可以缩小。现在我不担心客户端的带宽。我遇到了一个问题，可点击区域位于图像之外，这使得它看起来像是有某种不可见的链接

这就是我的意思

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

这是这部分的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>

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

我觉得我错过了一些非常明显的东西。我不能用谷歌搜索这个，因为“图片链接”看起来很普通。

这个怎么样

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

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

img {width:100%}


{显示：内联块；宽度：80%；高度：自动}
img{宽度：100%}

据我所知，你需要这样

<!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>

您可以这样实现：

JSFiddle-

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>

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

图像的父级不能是内联块。它必须是块，否则图像无法缩小，因为它没有相对的父级大小。奇怪的标准。@Mgamerz那么我不确定我是否完全理解这个问题。。您需要缩放图像，但不需要可单击区域？可单击区域应与图像相同。基本上，图像是链接，但不是左侧或右侧的区域（如果我有最大大小）。编辑：检查JSFIDLE似乎表明它的工作方式与我所希望的一样。让我来实现它并检查。最终编辑：这不会使图像居中。试试这个-也许我真的不擅长解释它，但Mary的评论正是我想要的：我不得不在CSS中的其他项目中添加很多新的对齐代码，但它工作正常。谢谢

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

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