图片不能放大缩小的问题
2019独角兽企业重金招聘Python工程师标准>>>
今天在写一个通过js控制图片的宽度和高度的demo,出现了一个与我逾期不一样的问题
一直以来,由于我们在页面中显示的图片一般不和给的图片尺寸相吻合,所以我们在页面中一般要对img标签定义一个宽高,如下面代码:
html代码:
<div id = "main">
<img src="dog.jpg" id="dog"/>
<button id="bigger" class="button">放大</button>
<button id="smaller" class="button">缩小</button>
</div>
css代码:
*{margin:0;padding:0;}
#main{width:900px;margin:0 auto;height: 900px;margin-top:100px;}
img{margin:0 auto;width:100px;height: 100px;}
.button{width:70px;height: 40px;line-height: 40px;text-align: center;background: purple;color: #fff;border:none;border-radius: 4px;margin-top:20px;margin-left: 200px;position: absolute;top:0;right: 80px;}
#bigger{top:50px;}
然后我写了如下的js代码:
window.onload = function(){
var img = document.getElementById('dog');
var big = document.getElementById('bigger');
var small = document.getElementById('smaller');
big.onclick = function(){
IsBig();
};
small.onclick = function(){
IsSmall();
};
var maxW = img.width*3;
var maxH = img.height*3;
var minW = img.width*0.3;
var minH = img.height*0.3;
//定义变大函数
function IsBig(){
var EveryW = img.width*1.3;
var EveryH = img.height*1.3;
var timer = setInterval(function(){
if(img.width < EveryW){
if(img.width < maxW){
img.width = img.width*1.05;
img.height = img.height*1.05;
}else{
alert('图片已经到达最大值了');
clearInterval(timer);
}
}else{
clearInterval(timer);
}
},20);
}
//缩小函数
function IsSmall(){
var Everyw = img.width*0.7;
var Everyh = img.height*0.7;
var timer = setInterval(function(){
if(img.width > Everyw){
if(img.width > minH){
img.width = img.width*0.95;
img.height = img.height*0.95;
}else{
alert("已经到达最小值了");
clearInterval(timer);
}
}else{
clearInterval(timer);
}
},20);
}
};
就是想通过点击放大和缩小按钮来控制图片的大小,然而,奇怪的是点击了按钮之后根本不改变,而且检查了好久js代码也没有发现错误,真是诡异,总是以为js代码出错了。最后在看审查元素中的html代码的时候,发现html中嵌入了width=105 height=105的字样,这说明js代码的确是没有错的。然后尝试去掉了img的宽高限制,也就是style中对img标签的限制。终于可以实现了。
最后总结了一下原因:在style中对img设置了宽高的限制之后,就相当于将img外层定义了一个具有overflow:hidden的容器,也就是将图片进行切割了,那样的话,图片根本不可能正常显示真实的宽高了。soga,原来小知识点还带这么坑人的。
转载于:https://my.oschina.net/sunshinewyf/blog/495271
图片不能放大缩小的问题相关推荐
- iOS 仿淘宝实现商品规格图片的放大缩小功能
刚好最近在做个商城项目,甲方爸爸说咱们要求不高,你就照着淘宝来就好,额~~~~ 好吧,咱就不吐槽了,直接开撸吧,惯例先上一下效果图 需求以及思路 我们要实现的功能有如下几个: 图片的全屏查看以及保存 ...
- html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小 最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
- C语言实现BMP图片的放大缩小
C语言实现BMP图片的放大缩小 BMP图片简介:BMP图片是windows操作系统中的标准图像文件格式,可以分为两类:设备相关位图(DDB)和设备无关位图(DIB),使用广泛.它采用位映射存储格式,除 ...
- Axure9图片拖动放大缩小
Axure9 图片拖动放大缩小 1.设置两个文本域,分别放置图片的宽与高 2.图片的交互设置 3.效果 当去请教一个会的人会的东西,因为他会,会很爽快的说不会可以问我呀,但是当问到不会的东西时,就会说 ...
- C语言实现图片的放大缩小(附完整源码)
C语言实现图片的放大缩小 #include<stdio.h> #include<stdlib.h> #include<string.h> typedef unsig ...
- Qt实现长图片的放大缩小以及动态显示
这篇文章是在这个基础上进行讨论的谈一谈分别利用opencv.Qt.matlab动态显示图片的实现 其实就是想找一种更加合适的方法进行图片的放大缩小以及动态显示. 这个是效果图 我把项目命名为Qtmli ...
- element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览 最近同事在写一个关于 图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
- jquery 实现点击图片居住放大缩小
jquery 实现点击图片居住放大缩小 该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调 ...
- android 自由缩放图片大小,android Matrix实现图片随意放大缩小或拖动
本文实例为大家分享了android Matrix图片随意放大缩小和拖动的具体代码,供大家参考,具体内容如下 step1:新建一个项目DragAndZoom,并准备一张照片放在res/drawable- ...
- 小程序富文本提取图片可放大缩小
小程序富文本提取图片可放大缩小 启发: step1 step2 step3 step4 step5 最后 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇 ...
最新文章
- Lora模块项目01:简述物联网的各大无线通信技术
- Arrays.asList方法总结
- 皮一皮:最头铁的汪峰...
- 遍历 HashMap 的 5 种最佳方式,我不信你全知道!
- 如何高效安全的将资源同步到本地数据库
- “约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式(建议收藏)
- java weka 聚类_简单开源数据挖掘工具weka进行文本聚类
- 逆序枚举时常犯的一个错误
- 动词ing基本用法_哪些动词后面只能接动名词背诵口诀
- Atitit json序列化工具 JsonParserAtiver 参考 Atitit json序列化原理 序列化是将一个对象变成json格式的字符串,而反序列化是将json格式的字符串变
- 一些简单的局域网入侵命令
- Cocos Creator中的Tween
- react使用@tweenjs/tween.js实现数字动态增长
- 电商“双11”or直播“双11”?
- pictureselector 压缩_PictureSelector
- uVision, MDK, realview的关系
- 【从零开始玩量化1】AKShare: Python开源财经数据接口库
- SEO的工作内容是什么?
- JSON转换为JS对象和JS对象转换为JSON
- Python Web前端概述