用JS自动缩小超出大小的图片

最新推荐文章于 2024-07-11 20:55:36 发布
最新推荐文章于 2024-07-11 20:55:36 发布
阅读量123 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zgz_dpl/archive/2010/11/13/1876668.html
版权

在文章的正文中，往往会出现一些超大的图片，把页面撑开变形，影响了美观。用这段JS代码就可解决这个问题，你可以把图片的最大值限定在一定范围内，当图片大小超出这个尺寸后，就会被自动缩小。

<SCRIPT src="/js/ShowPic.js" type=text/javascript></SCRIPT>
<script  language="JavaScript"> 
<!-- 
var  flag=false; 
function  DrawImage(ImgD){ 
     var  image=new  Image(); 
     image.src=ImgD.src; 
     if(image.width>0  &&  image.height>0){ 
       flag=true; 
       if(image.width/image.height>=  200/200){ 
         if(image.width>200){     
         ImgD.width=200; 
         ImgD.height=(image.height*200)/image.width; 
         }else{ 
         ImgD.width=image.width;     
         ImgD.height=image.height; 
         } 
        
         } 
       else{ 
         if(image.height>200){     
         ImgD.height=200; 
         ImgD.width=(image.width*200)/image.height;           
         }else{ 
         ImgD.width=image.width;     
         ImgD.height=image.height; 
         } 
        
         } 
       } 
}   
//--> 
</script>

把上边的这段代码加入<head></head>之中
在相关图片上加入以下代码或者把onload的代码加入到body里：

<img src=# οnlοad=javascript:DrawImage(this); >

转载于:https://www.cnblogs.com/zgz_dpl/archive/2010/11/13/1876668.html

anmushi3186
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 加载时自动调整图片大小
10-30
又一个javascript自动调整图片大小的脚本
JS自动缩小超出大小的图片
10-27
在文章的正文中，往往会出现一些超大的图片，把页面撑开变形，影响了美观。用这段JS代码就可解决这个问题，你可以把图片的最大值限定在一定范围内，当图片大小超出这个尺寸后，就会被自动按比例缩小
两步轻松搞定 编辑器上传图片尺寸过大 超出前台显示区域问题！
创世宇图 宏图天下
03-11 8439
用户在编辑器中随意上传图片，难免会遇到图片宽度超出前台显示区域，严重影响页面展示美观度。。。。 两步搞定方法： 1、书写在内容显示区域DIV中控制img标签最大宽度。 2、js清除用户设定宽度。 问题HTML 例如： 如代码中所示，图片一般都会超出指定范围。 处理方法： .con img{ max-width:500px;} $(documen
[JS]JS控制图片超过宽度自动缩小图片等比例缩放源代码实例
lucky123star的博客
03-25 1051
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;最新javascript自动按比例显示图片，按比例压缩图片显示&lt;/ti
当显示的图片超过指定的显示大小的时候,用js等比缩小图片
shirlly
06-17 149
其中650就是指定的显示图片的大小 如果是编辑器中插入的图片在不能编辑其代码的情况下,可以通过下面的方法获取插入的图片的对象然后等比缩放图片 [code="java"] function changeImagesSize(){ var imageArray = document.getElementById("content").getElementsByT...
又一个图片自动缩小的JS代码
10-31
标题中的“又一个图片自动缩小的JS代码”指的是一个JavaScript函数，用于自动调整网页中图片的大小，确保图片不会超出预设的最大尺寸。这个功能在网页设计中非常实用，可以防止大图片影响页面布局，提高网页加载速度...
基于jQuery的图片不完全按比例自动缩小
10-25
针对这个问题，我们可以使用CSS的`max-width`属性来限制图片的最大宽度，从而实现按比例自动缩小。然而，这种方法在某些情况下可能会导致图片高度不足，造成显示不协调。例如，当图片按目标宽度缩放后，高度小于显示...
JS+css 图片自动缩放自适应大小
01-19
我加了css的限制： 代码如下:div img {}{max-width:600px;width:600px;width:[removed]document.body... ◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏，避免控制图片大
HTML <img> 标签的 height 和 width 属性
weixin_34329187的博客
01-29 1048
定义和用法 &lt;img&gt; 标签的 height 和 width 属性设置图像的尺寸。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。 提示：请不要通过 hei...
图片自动缩小的JS代码
浩瀚星空，法力无边；其大无外，其小无内。
03-09 1169
 JavaScript"> var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){   flag=true;   if(image.width/image.height>= 180/110){    if(ima
ECCMS下显示文章内容的图片时超出大小自动缩小,点击放大图片
生活在继续
08-13 1502
1、htmer_img.js文件放到网站内 function ResizeImage(swidth,sheight,maxWidth){  //liuyunfan20130808三个参数 需满足高度和宽度再进行图片缩放，防止广告位高度宽度不足引起的误缩放 //swidth  满足缩放的宽度 //sheight  满足缩放的高度 //maxWidth将来图片缩放的宽度 try{  if
JS限制图片大小并自动缩放
dpn525的专栏
09-19 131
//限制产品内容图片大小，自动缩放 function autoResizepic() { var picTarget=document.getElementById("fontzoom").getElementsByTagName("img"); if(picTarget){ if(picTarget[0].width&gt;600){picTarget[0].height=picTar...
适合所有CMS的文章中图片自动缩小到特定尽寸的通用JS代码
idch99的专栏
01-27 570
 前几天群里碰到好几个在调整内容页图片尺寸太大时自动缩小的问题，今天我在做一个别墅设计相关网站时，也碰到了这个问题，所以考虑了个通用的解决方案。所谓通用：1.任何CMS，且不论语言，如PHP还是ASP还是3P之外的其它P,均可使用2.只需要把这个代码添加到内容页模板的最下方，或者直接添加到footer.htm等公共页脚模板中3.不需要作任何编程基础，甚至连How To Make Love也不需要知道就能用好，费话这么多，只有一点，高手请略过，下面方法及代码仅供懒得看编程、懒得改程序的懒人参考。======一
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 868
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 435
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 184
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
最新发布
huanghm88的专栏
07-11 605
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
JS混淆基本类型和原理
朴拙科技的博客
07-06 740
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
css文字超出自动缩小
06-13
要让 CSS 中的文字自动缩小，你可以使用 CSS 中的 `text-overflow` 和 `white-space` 属性。以下是一些示例代码： ```css /* 让文字超出时省略号出现并缩小 */ .ellipsis { overflow: hidden; white-space: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值