html - 如何从预览图像过渡到表格中的完整尺寸。 (鼠标悬停在 ="this.width=MAX WIDTH;this.height=MAX HEIGHT"上)

Question

我正在制作一个照片库，需要能够为每张图片使用相同的代码。但是，并非所有图像的大小都相同。我已将预览窗口(每个表格 block )设置为 275px x 200px。我想知道是否有一些代码可以让我将图像放大到它的原始大小(与 275px x 200px 不成比例)，以便代码将干净地应用于每个图像。我已经尝试将 100% 设置为 100%，但这不起作用。

编辑:@AjayMalhotra @IamL @MisterEpic

这里有一个更清晰的 html 示例，其中包含工作图像示例。我尝试了所有的答案，但没有一个奏效。他们要么让图像消失、闪烁，要么什么都不做。为了澄清，我试图在鼠标悬停时让表格单元自动扩展到图片的大小。我知道这有点奇怪，它甚至可能无法实现。再次感谢您的帮助!

    <table cellpadding="0" border="0">  
        <tr>
            <td width="275px" height="200px" onmouseover="width='586px'; height='440px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="http://images.freeimages.com/images/previews/72c/danger-school-traffic-signal-1444922.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='410px'; height='615px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="http://www.publicdomainpictures.net/pictures/20000/nahled/business-time-11291126308C1Y.jpg"></td>
    </tr>
  </table>

感谢您的帮助!

Answer 1

如果您想在鼠标光标悬停在图片上时放大:

img{
  width:275px;
  height:200px;
}

img:hover{
  width:auto;
  height:auto;
}

https://jsfiddle.net/yfnzo8te/