在锚标签中环绕动态 img 标签

Question

我在使用锚点和图像标签时遇到了一些问题。我的图像标签位于（本质上是）每个 div 标签内，div 标签具有恒定的高度和宽度值。图像标签被赋予一个恒定的高度值，因此它们的宽度可以根据它们的纵横比来计算，并且当它们被调整大小以适应 div 时，图像不会变得扭曲。

出于两个原因，我希望在每个图像周围都有一个锚标记。 (1.) 所以图像可以充当链接，而且 (2.) 这样当用户将鼠标悬停在图像上时，我可以在图像顶部显示叠加层。

将图像标签放在锚标签内解决了链接的问题，但至于第二个问题，我被难住了。我需要锚标签动态调整大小并将其定位在其各自的图像标签上。理想情况下，我想避免使用 JavaScript 来解决问题，而只使用 CSS（如果可能的话）。如果需要，我不反对添加一些额外的标记。

相关 HTML：

<listitem>

    <a href="#"><img src="../images/image1.jpg"/></a>

</listitem>

<!--More listitems with different sized images go here-->

还有 CSS：

#pictureListContainer listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

#pictureListContainer listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

提前致谢。

更新：我也许应该明确表示我希望叠加层具有与图像相同的尺寸，以便它只覆盖图像。

Answer 1

仅使用 CSS 和 HTML 即可完成：JSFiddle

HTML

<div class="listitem">
    <a href="#">
        <img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
        <span class="overlay-text">Test</span>
    </a>
</div>

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
    overflow: hidden;
}

.listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    position: relative;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}

---

编辑：覆盖适合图像

JSFiddle

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

.listitem img {
    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

.listitem a {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}

Answer 2

您可以为图片使用onClick

<img src="" onClick="" />

这将消除为a标签生成叠加等功能的麻烦，您可以同时很好地同时工作。

希望这会有所帮助。