Question

请参阅：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>

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

Answer 1

您可以使用max-width。

img {
  max-width: 300px;
}

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

在悬停时放置放大的图像

1 个答案: