javascript - 弹出图片html

Question

我正在开发一个 chrome 扩展，当鼠标悬停在图像上时，它应该在图像上弹出一个框，并且图像应该缩放到原始图像的 1.5 倍。所以我开始研究示例并找到了一个类似的示例。

.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomin img:hover {
  width: 300px;
  height: 300px;
}

<div class="zoomin">
  <img src="http://www.corelangs.com/css/box/img/zimage.png" title="All you need to know about CSS Transitions " />
</div>

但是我需要创建一个框，而不需要在悬停时缩放图像。所以在我的练习中使用这个 Using only CSS, show div on hover over <a>我开发了这个。

main.js

div {
    display: none;
}

img:hover + div {
    display: block;
 height : 200px;
    width : 300px;
}

但问题是图片的大小应该根据我们悬停的图片动态调整。

当我们将鼠标悬停在图像上时，有没有办法让它工作，它应该自动生成一个 div，它应该容纳图像尺寸的 1.5 倍。有什么建议吗？请帮忙

我附上了下面的屏幕截图以供引用。

Answer 1

  img:hover  div {
        display: block;
var img = document.getElementById('imageid'); 
// get the image dimensions using this id
var width1 = img.clientWidth;
var height1 = img.clientHeight;
        height : width * 1.5;
        width : height * 1.5;
    }