html - 悬停在表格内的图像未显示完整图像大小

Question

HTML 表格代码:

<tr class="tr2">
<td class="td-center addonstitle">Addon Title</td>
<td class="td-center addonsdescription">Description</td>
<td class="td-center addonsauthor">Author</td>
<td class="td-center addonsscreenshot"><div class="hover_img"><a href="#">Show Image<span><img src="imagelink" alt="image"></a></div></td>
</tr>

CSS:

.hover_img a { 
position:relative; 
}

.hover_img a span { 
position:absolute; 
display:none; 
z-index:99; 
}

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

目前，当您将鼠标悬停在“显示图像”链接上时图像会显示，但它会缩小到表格的大小(几乎隐藏)但是我希望它在您将鼠标悬停在“显示图像”上时显示完整图像大小.

我尝试设置宽度/高度和溢出:对 a:hover span CSS 可见，但图像继续仅以表格下方的尺寸显示。此处显示的问题:https://i.imgur.com/YxK0Npb (红色圆圈部分)(悬停的原始图像:https://i.imgur.com/sSKurPk.jpg)-悬停时应该显示完整图像 sSKurPk.. 而不是显示的小电流部分。

编辑:必须删除 HTML 代码中的链接 - “图像链接”链接到 https://i.imgur.com/sSKurPk.jpg

Answer 1

有没有类似的东西？

img {
    max-width: 100%;
}

这可以防止图像溢出/全尺寸。