码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 实现网页图片的等比缩放

时间:2021-01-26 12:19:18      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:不能   使用   图片   off   lan   offset   htm   title   动态控制   

网上有很多写使用纯CSS来实现图片的等比缩放的,到目前为止,我还没有发现一个可用的方法。这里的等比缩放是指按照图片的原始尺寸和比例进行缩放。

网上的方法大多如下:

img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}

 或者动态计算一下

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

  这些都不能实现等比缩放。

我使用JS的动态计算实现了一下。

大致原理如下 :

(1)获取图片的原始高和宽。

(2)根据限定的宽和高计算等比缩放后的宽和高。

(3)再使用js动态控制图片展示的宽和高。

代码可以去我的个人博客去看:https://www.lebang2020.cn/details/210124ycbfvuqd.html

 

 

 


JavaScript 实现网页图片的等比缩放

标签:不能   使用   图片   off   lan   offset   htm   title   动态控制   

原文地址:https://www.cnblogs.com/xinsiyu/p/14322941.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!