html放图片怎么固定比例缩放,指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）..._北美R哥的博客-程序员秘密

技术标签： html放图片怎么固定比例缩放

//缩放图片到合适大小

function ResizeImages()

{

var myimg,oldwidth,oldheight;

var maxwidth=550;

var maxheight=880

var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定义的id不是article，请修改此处

for(i=0;i

myimg = imgs[i];

if(myimg.width > myimg.height)

{

if(myimg.width > maxwidth)

{

oldwidth = myimg.width;

myimg.height = myimg.height * (maxwidth/oldwidth);

myimg.width = maxwidth;

}

}else{

if(myimg.height > maxheight)

{

oldheight = myimg.height;

myimg.width = myimg.width * (maxheight/oldheight);

myimg.height = maxheight;

}

//缩放图片到合适大小

ResizeImages();

意思就是控制指定区域的的图片大小，要不一些大点的广告图片也会变形。

脚本之家用的图片控制代码：

function controlImg(ele,w,h){

var c=ele.getElementsByTagName("img");

for(var i=0;i

var w0=c[i].clientWidth,h0=c[i].clientHeight;

var t1=w0/w,t2=h0/h;

if(t1>1||t2>1||w0>=600){

c[i].width=Math.floor(w0/(t1>t2?t1:t2));

c[i].height=Math.floor(h0/(t1>t2?t1:t2));

if(document.all){

c[i].outerHTML=''+c[i].outerHTML+''

}

else{

c[i].title="在新窗口打开图片";

c[i].οnclick=function(e){window.open(this.src)}

}

ele就是指定的区域，w是最大的宽度，大于这个就会缩小。h是最大的高度。

本文链接：https://blog.csdn.net/weixin_29067143/article/details/117847729

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

编写软件动态加载NT式驱动_epluguo的博客-程序员秘密

NT式设备驱动程序的动态加载主要是由服务控制管理程序（Service Control Manager，即SCM）系统组件来完成的。 Windwos服务可以在系统启动时加载，用户也可以按需在服务控制平台开启或者关闭服务。程序员可以通过Windows提供的相关服务函数进行加载或者卸载该服务等。服务程序更是可以在用户还没有登录系统的时候，就载入系统并且被执行。加载NT驱

Android应用程序的启动过程_301|authlocatorutils.startactivitysafely|138 start_贵公子的博客-程序员秘密

前言在Android系统中，Activity和Service是应用程序的核心组件，它们以松藕合的方式组合在一起构成了一个完整的应用程序，这得益于应用程序框架层提...

javaweb接入QQ登录_printf_mkdir的博客-程序员秘密

前提拥有自己的域名和服务器域名已备案https://github.com/xiongsihao/springBoot_demo 源码下载地址登录成功效果获取信息展示：一. 关于第三方登录简要介绍第三方登录：用户登录操作不是基于自身建设账号体系，而是基于用户在第三方平台上已有的账号和密码来快速完成登录的过程。下面我列举了几点第三方登录的优点。极大的简化登录注册的流程。...

LINUX CentOS8.3在PC机上面安装部署_centos8.3安装_与自己作战的博客-程序员秘密

PC机默认都不支持Linux系统，需要修改配置安装Linux系统，自己经过研究以后完成可支持Linux安装

计算机工程技术学术活动,第六届电气、电子和计算机工程研究国际学术研讨会将于南京举办！..._mao dingding的博客-程序员秘密

原标题：第六届电气、电子和计算机工程研究国际学术研讨会将于南京举办！第六届电气、电子和计算机工程研究国际学术研讨会(2021 6th International Symposium on Advances in Electrical, Electronics and Computer Engineering)(ISAEECE2021)现已启动征稿。本次会议将于2021年3月12-14日在中国南京召...

Linux I2C驱动分析(一)----I2C架构和总线驱动_辉辉308的博客-程序员秘密

本文作为i2c驱动分析的第一部分，主要讲述：1、I2C总线原理。2、I2C架构概述。3、I2C代码在内核中的结构。4、Algorithm中的传输函数master_xfer。5、总线驱动注册和探测函数。

随便推点

魔法命令_斵冰且行的博客-程序员秘密

目录1. %quickref 显示 IPython 快速参考卡2. %magic 显示所有可用魔法命令的详细文档3. %debug 从最后发生报错的底部进入交互式调试器4. %hist 打印命令输入/输出历史5. %pdb 在发生异常后自动进入调试器6. %paste 执行剪贴板中的 Python 代码7. %cpaste 打开一个特殊的提示符，手工粘贴待执行的 Python 代码8. %reset 删除命名空间中的全部变量/名称9. %page object 分页显示一个对象10. %time state