js控制图像等比例缩放

<!DOCTYPE html>
<html>
<head><title>图片内部放大效果</title>
<meta charset="utf-8">
<style type="text/css">#imgborder{ width: 200px;height: 160px;border: 3px solid #000; overflow: hidden;position: relative;padding: 0px;margin:0px;}#firstimg{ position: absolute; animation: myan 3s;}/*@keyframes myan {from{width: 200px;}to{width: 500px;}}*/
</style>
</head>
<body>
<div id="imgborder">
<img src="dog.jpg" id="firstimg">
</div>
</body>
<script type="text/javascript">var fimg = document.getElementById('firstimg');var imgb = document.getElementById('imgborder');var initial = 0;fimg.onmouseover = function(){// img设置宽度，高都会等比例变大initial = fimg.width;fimg.width=fimg.width*1.2;// fimg.height=fimg.height*1.1;// alert(imgb.clientWidth);fimg.style.left=-(fimg.width-imgb.clientWidth)/2+"px";fimg.style.top=-(fimg.height-imgb.clientHeight)/2+"px";// alert(fimg.style.top);}fimg.onmouseout = function(){fimg.width = initial;fimg.style.left="0px";fimg.style.top="0px";}</script>
</html>

转载于:https://www.cnblogs.com/w-y-y/p/7087661.html

js控制图像等比例缩放相关推荐

python 图像等比例缩放
图像等比例缩放图像缩放等比例缩放 pytorch下,对多维tensor进行缩放图像缩放目前比较常用的就是opencv-python底下的cv2.resize() cv2.resize(src, ...
基于opencv的图像等比例缩放
项目中图片经常需要resize,但是直接调用resize方法可能会使图像造成畸变,下面给出,基于opencv的图像等比例缩放的方法. import cv2def resize_keep_aspectr ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
Opencv 图像等比例缩放
在神经网络训练过程中,会使用到大量的数据预处理操作.而缩放操作就是这里面最基础.例如Certernet中的缩放就是使用了等比例缩放,周围填充0的操作. 我们来分析下实现原理和实际效果如上图所示,是将 ...
CSS控制图片等比例缩放
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
css 网页整体缩小,css等比例缩放
css 可以按比例缩放图片吗? 不用 js 代码实现图片比例缩放,就是不超出DIV设定的高宽显示等比例图片解决这个问题的方法如下: 先在html里添加一个img图片标签. 运行页面后,这是完整显示图 ...
大屏---适配比例缩放--视频播放完路由自动切换
这里写目录标题 1. 比例缩放 1-1. 方法一: 全局引进文件 flex.js ---- 代码如下: 在 vue.config.js中配置入口文件 1-2. 方法二: 局部引进封装一个全局组件 ...
html5表格图片按比例缩放,JS图片等比例缩放方法完整示例
本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...

js控制图像等比例缩放

js控制图像等比例缩放相关推荐

最新文章

热门文章