Question

我正在构建一个医疗系统，医生（用户）可以将心电图（心电图）发送给其他医生（专科医生），然后再对其进行检查，对其进行检查以帮助他们。为了检查这个ECG - 这是一个JPG图像 - 他们需要一个标尺来检查＆＃34;线＆＃34;心电图有＆＃34;变化＆＃34;或不。

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

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

我在互联网上搜索，但在其他系统中找不到类似内容：（

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

Answer 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);
}

我希望它会有所帮助!!

在图像悬停上显示标尺并缩放它

1 个答案: