在图像悬停时显示标尺并缩放它答案

【问题标题】：Show ruler on image hover and also zoom it在图像悬停时显示标尺并缩放它
【发布时间】：2016-12-07 17:24:30
【问题描述】：

我正在构建一个医疗系统，医生（用户）可以将心电图（心电图）发送给其他医生（专家），然后对这个系统进行审查以帮助他们。要查看这张心电图——这是一张 JPG 图像——他们需要一把尺子来检查心电图的“线”是否有“变化”。

心电图是这样的 > http://cdn.lifeinthefastlane.com/wp-content/uploads/2009/09/ecg_brugada_001.jpg

所以，基本上我想要实现的是当用户悬停图像时，我必须将其再缩放 20% 并显示一个标尺来帮助他进行分析。

我在互联网上搜索，但在任何其他系统中都找不到类似的东西:(

有人知道我该如何实现这一目标？谢谢！！

【问题讨论】：

寻求调试帮助的问题必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： javascript jquery html css

【解决方案1】：

我不知道标尺，但我可以告诉你关于悬停图像缩放的想法

HTML

<div class="item">
  <img src="path_to_image" alt="pepsi" width="540" height="548">

</div>

CSS3

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;

  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

希望对你有帮助！！

【讨论】：