悬停时定位放大图像答案

【问题标题】：Position Enlarged Image On Hover悬停时定位放大图像
【发布时间】：2013-10-23 12:08:40
【问题描述】：

请看：http://silverbacksport.com/rugby_collection.html

这是我正在使用的 HTML：

<table style="width: 100%" cellpadding="8" cellspacing="9" align="center">
    <tr>
        <td class="auto-style5" style="width: 167px">
            <img alt="" src="Images/RUGBY%20-%20Template1%20-%20thumb.jpg" 
                onmouseover="this.src='Images/RUGBY - Template1.gif'"
                onmouseout="this.src='Images/RUGBY - Template1 - thumb.jpg'" />
        </td>
        <td class="auto-style5" style="width: 167px">
            <img alt="" src="Images/RUGBY%20-%20Template2%20-%20thumb.jpg"
                onmouseover="this.src='Images/RUGBY - Template2.gif'"
                onmouseout="this.src='Images/RUGBY - Template2 - thumb.jpg'" />
        </td>
    </tr>
</table>

有没有办法可以将放大的图像放在鼠标悬停上，使其保持在页面垂直边框的范围内？

【问题讨论】：

标签： html image hover

【解决方案1】：

您可以为此使用max-width。

img {
  max-width: 300px;
}

这样，您将控制图像的扩展程度。您可以将此max-width 用于图像的容器，并将width: 100% 用于图像。这样，浏览器会自动检查最适合当前容器大小的分辨率。

【讨论】：

谢谢 Afzaal Ahmad Zeeshan，但如果我显得有点昏暗，请见谅：
谢谢@Afzaal Ahmad Zeeshan，但是，如果我看起来有点暗淡，对不起：当你说向图像的容器添加 max-width 时，容器是吗？而且，我在哪里可以将 width:100% 添加到给定的图像：onmouseover="this.src='Images/LM CAP (2013).jpg'" ？
当然我想说td。不，这是一个 CSS 属性，所以你将它添加到 .css 文件中。
就是这样！再次感谢
还有一个问题请@Afzaal Ahmad Zeeshan？带有在悬停时展开的缩略图的页面现在可以很好地工作。但是现在，max-width CSS 属性也适用于主页上滑块中的图像，我希望它是完整的原始大小。有没有办法解决？ CSS:.rotating-item { 显示：无；位置：绝对；顶部：0；左：0； }