如何从预览图像转换为表格中的完整大小。 （onmouseover =＆＃34; this.width = MAX WIDTH; this.height = MAX HEIGHT＆＃34;）

Question

我正在制作照片库，并且需要能够为每张图片使用相同的代码。然而，并非所有图像都具有相同的尺寸。我将预览窗口（每个表格块）设置为275px×200px。我想知道是否有一些代码可以让我将图像放大到它的原始大小（与275px不成比例200px），这样代码就可以干净地应用于每个图像。我已经尝试过100％，但这不起作用。

编辑：@AjayMalhotra @IamL @MisterEpic

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

var data=function(){
    var x=5;
    return {
        fun:function(){
            console.log(x);
        }
    };
};

var y=data();
y.fun();

感谢您的帮助！

Answer 1

如果您希望在鼠标光标悬停在图像上时进行放大：

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

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

https://jsfiddle.net/yfnzo8te/

Answer 2

尝试在您的CSS上添加此内容。 如果你要调整背景图片的大小：

td:hover {
  background-size: 100%;
}

如果要调整td内的图像大小。

td:hover img {
  height: 100%;
  width: 100%;
}

如果需要，您也可以尝试添加max-width和max-height：

td:hover img {
    max-width: 100%;
    max-height: 100%;
}

Answer 3

无需为小任务调用javascript。

我认为这段代码会对您有所帮助：

＆＃13;

＆＃13;

.grid-img:hover{position:absolute;width:100%;height:auto;
transition: width .3s;-webkit-transition: width .3s;-moz-transition: width .5s;
}

＆＃13;

<table border=1>
   <tr>
      <td width="275px">
     <img class="grid-img"  width="275px" height="200px" src="http://www.medhatspca.ca/sites/default/files/news_photos/2014-Apr-15/node-147/cute-little-cat.jpg">
     </td>
     <td>
       sadasDSadASDSAdaS
     </td>
     <td>
       sadasDSadASDSAdaS
     </td>
     <td>
       sadasDSadASDSAdaS
     </td>
     <td>
       sadasDSadASDSAdaS
     </td>
     <td>
       sadasDSadASDSAdaS
     </td>
   </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如果这不是您想要的答案，请妥善解释。我会找到一些解决方案。