首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在图像悬停时显示标尺,并缩放它

在图像悬停时显示标尺,并缩放它
EN

Stack Overflow用户
提问于 2016-12-08 01:24:31
回答 1查看 113关注 0票数 0

我正在建立一个医疗系统,医生(用户)可以发送心电图(心电图)给其他医生(专家),然后这一个,审查它,以帮助他们。要检查这张ECG --这是一张JPG图像--他们需要一把尺子来检查ECG的“线”是否有“变化”。

心电图图像如下所示> http://cdn.lifeinthefastlane.com/wp-content/uploads/2009/09/ecg_brugada_001.jpg

因此,基本上我试图实现的是,当用户悬停图像时,我必须将其放大20%,并显示标尺来帮助他进行分析。

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

有人知道我如何才能做到这一点?谢谢!!

EN

回答 1

Stack Overflow用户

发布于 2016-12-08 01:56:31

我不知道标尺,但我可以给你关于悬停时图像缩放的概念

HTML

代码语言:javascript
运行
复制
<div class="item">
  <img src="path_to_image" alt="pepsi" width="540" height="548">

</div>

CSS3

代码语言:javascript
运行
复制
* {
  -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);
}

我希望它能有所帮助!!

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41023656

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档