如何使onmouseover图像大小相对于onmouseout img？答案

【问题标题】：How to make onmouseover image size relative to onmouseout img?如何使onmouseover图像大小相对于onmouseout img？
【发布时间】：2020-10-03 22:00:09
【问题描述】：

我目前正在使用 onmouseover 和 onmouseout 在鼠标悬停时显示不同的图像。

onmouseover 图像与 onmouseout 图像具有不同的尺寸，因此当图像悬停在其上时，它会更改页面布局。

这是我目前拥有的代码示例：

<img src="images/image.png" onmouseover="this.src='images/image2.png';" onmouseout="this.src='images/image.png';">

有没有办法将鼠标悬停图像设置为与鼠标悬停图像的宽度一致，从而不改变页面布局？

（我对这一切都很陌生，所以请多多包涵）

【问题讨论】：

标签： html image onmouseover onmouseout

【解决方案1】：

最简单的方法是首先找到您的主要 image width 和 height 尺寸

我的主图width是750px，高度是500px

所以你只需要为你的img标签设置width and height的style属性

它将为包括onmouseover和onmouseout在内的所有图像设置width和height，所有三个图像都将以相同的尺寸显示

<img style="width: 750px; height: 500px;" src="https://images.unsplash.com/photo-1592134959663-4cdd34840e63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"

onmouseover="this.src='https://images.unsplash.com/photo-1592101872812-cdbbe7912bfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60';"


  onmouseout="this.src='https://images.unsplash.com/photo-1592081164105-70c567c6cfa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60';">

【讨论】：

谢谢，我正在使用百分比宽度来使网站可扩展，我正在努力为每张图片获取正确的百分比，还有其他方法吗？
您能否提供更多code 以便获得更好的视图
当然，我正在为我的服装品牌创建目录，当您将鼠标悬停在图像上时，它会放大设计。我使用表格来布置图像。然后我想要它，以便在减少文档时开始减少列数，从 4 到 3、2 和 1 用于移动设备，为此我使用了不同最小宽度和最大宽度的 @media only screen and (min-width: 650px) {#one {display: none;}} 来隐藏和显示不同视口宽度的不同表格...（在下一条评论中继续）
...对于 4 列表，我设法通过将悬停图像编辑为与包含 <th> 相同的大小来使悬停图像正常工作，但是当向下移动到另一个列级别时，它会分崩离析这意味着我必须为每张桌子制作不同像素大小的多个图像。