我在使用锚点和图像标签时遇到了一些问题。我的图像标签位于(本质上是)每个 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);
}
提前致谢。
更新:我也许应该明确表示我希望叠加层具有与图像相同的尺寸,以便它只覆盖图像。