`
wencan83
  • 浏览: 42187 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

图片自动按比例缩小代码(防止页面被图片撑破)

阅读更多

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >

//缩放图片到合适大小
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<imgs.length;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();
</script>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>

分享到:
评论

相关推荐

    图片自动按比例缩小代码防止页面被图片撑破.rar

    这个压缩包文件"图片自动按比例缩小代码防止页面被图片撑破.rar"可能包含了实现这一功能的代码示例。 首先,我们需要理解基本的HTML图片元素`&lt;img&gt;`,它有`width`和`height`属性用于设置图片的显示尺寸。但若原图...

    图片自动按比例缩小代码(防止页面被图片撑破

    下面将详细介绍一种JavaScript实现的图片自动按比例缩小的解决方案。 首先,我们需要理解基本的HTML图片元素 `&lt;img&gt;`,它通常包含`src`属性来指定图片源,`width`和`height`属性用于设定图片的原始尺寸。但是,如果...

    图片自动按比例缩小防止页面被图片撑破特效代码

    在网页设计中,图片是不可或缺的元素,它们可以为...以上这些技术结合使用,可以有效地实现图片自动按比例缩小,防止页面被图片撑破的效果。在实际应用中,我们需要根据具体项目需求和用户设备特性进行灵活组合和优化。

    指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)

    在提供的代码中,有两个JavaScript函数用于实现图片按比例缩放,以适应指定区域的大小,防止图片撑破页面。这两个函数分别是`ResizeImages`和`controlImg`。 1. `ResizeImages`函数: 这个函数首先定义了最大宽度`...

    asp按比例缩小图片

    "asp按比例缩小图片"这个标题所指的就是使用ASP编程语言来实现图片的等比例缩放,以确保图片在尺寸减小后保持原有的纵横比,避免失真。以下是对这个知识点的详细讲解: 1. 图片上传: ASP可以通过HTTP请求获取用户...

    图片自动缩小的js代码,用以防止图片撑破页面

    总结来说,这段JavaScript代码通过动态调整图片尺寸,实现了防止图片撑破页面的效果。它确保图片在加载时自动缩放,保持正确的比例,同时避免了因图片过大而引起的页面布局混乱。在实际应用中,只需要将代码中的图片...

    适合商品展示,图片通过按扭控制可等比例放大、缩小

    等比例缩放意味着在放大或缩小图片时,保持其长宽比不变,以防止图像失真。这种操作在商品展示中至关重要,因为它允许用户清晰地查看商品细节,而不改变其原始形状。 实现这一功能通常需要前端开发技术,如HTML、...

    C# webbrowse 放大缩小页面

    注意,这里我们限制了缩放因子的范围,以防止页面过小或过大而影响阅读体验。 3. 接下来,我们将这两个方法绑定到用户界面的按钮事件,例如: ```csharp private void btnZoomIn_Click(object sender, EventArgs e...

    jquery 插件,自动缩小过大的图片

    如果图片的尺寸超过了容器,插件会动态地调整图片的宽度和高度,以适应容器,同时保持图片的比例,防止失真。这样,大图在不影响显示效果的前提下被缩小,减少了页面加载时间和数据消耗。 使用这个插件的方法通常是...

    jQuery移动端图片触摸放大代码.zip

    它利用jQuery库,结合移动设备特有的触摸事件,实现了图片在手机或平板电脑上可以被用户轻松地放大和缩小,从而提供更直观的查看体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及...

    基于jQuery的图片不完全按比例自动缩小

    标题中的“基于jQuery的图片不完全按比例自动缩小”是指通过JavaScript库jQuery来解决图片在不同尺寸显示区域中的适配问题。主要涉及到以下几个关键知识点: 1. **图片比例保持**:为了保持图片原有的比例,我们...

    又一个图片自动缩小的JS代码

    标题中的“又一个图片自动缩小的JS代码”指的是一个JavaScript函数,用于自动调整网页中图片的大小,确保图片不会超出预设的最大尺寸。这个功能在网页设计中非常实用,可以防止大图片影响页面布局,提高网页加载速度...

    php实现图片等比例缩放代码

    在PHP中实现图片等比例缩放是一项常见的需求,特别是在网络应用中,用户上传图片后,为了减少加载时间和节省存储空间,通常需要将图片尺寸进行缩小处理。等比例缩放指的是在缩放图片时保持图片的宽高比不变,避免...

    banner放大图片

    这种效果通常是通过动态改变图片的尺寸来实现,特别是当用户滚动页面时,使得banner图像在视野中逐渐扩大。本文将深入探讨如何使用Objective-C来实现这一功能。 Objective-C是苹果公司开发的一种面向对象的编程语言...

    图片放大,手势放大

    3. **智能裁剪或平移**:在放大时自动裁剪图片的多余部分,或者允许用户在放大状态下平移图片,以查看不同区域。 4. **自适应布局**:根据屏幕尺寸动态调整图片的显示方式,确保图片始终适应屏幕大小。 在...

    Android实现图片轮播效果

    `MIN_SCALE`常量定义了最小缩放比例,避免图片在切换时过于缩小。 4. **处理页面变换**: 自定义的ViewPager需要监听页面变化事件,这通常通过重写`onPageScrolled()`和`onPageSelected()`方法实现。在这些方法中...

    javascript经典特效---图片的大小变换.rar

    例如,当窗口缩放时,图片也随之按比例缩放,保持布局的和谐。 7. **jQuery库**:对于更复杂的操作,可以借助jQuery这样的JavaScript库,它提供了丰富的API,简化了DOM操作和动画效果的实现,让图片大小变换更容易...

    自定义百度地图放大和缩小功能

    在本项目中,我们主要探讨的是如何自定义百度地图的放大和缩小功能。百度地图作为国内广泛应用的地图服务提供商,提供了一系列API供开发者进行二次开发,实现各种定制化需求。在这个项目中,我们将深入理解如何利用...

Global site tag (gtag.js) - Google Analytics