JavaScript动态调整图片尺寸

来源:ImBolo.com 时间:2009-11-23 12:20:00 

在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单,但坏处是会破坏某些细节的效果。

如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断,被隐藏了,很对不起观众。

通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性。IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari和Opera,记不清了),这样做的话对这些浏览器的用户很不公平。

因此,我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好(现在应该很少人会禁用JavaScript吧?),如果换主题的话,也可以灵活地改变文章插图的最大尺寸。

方案有两个,由于我使用的主题是加载了jQuery库的,因此可以用以下代码实现:

以下为引用的内容:

$(document).ready(function() {
   $('.post img').each(function() {
   var maxWidth = 100; // 图片最大宽度
   var maxHeight = 100;    // 图片最大高度
   var ratio = 0;  // 缩放比例
   var width = $(this).width();    // 图片实际宽度
   var height = $(this).height();  // 图片实际高度
 
   // 检查图片是否超宽
   if(width > maxWidth){
       ratio = maxWidth / width;   // 计算缩放比例
       $(this).css("width", maxWidth); // 设定实际显示宽度
       height = height * ratio;    // 计算等比例缩放后的高度
       $(this).css("height", height * ratio);  // 设定等比例缩放后的高度
   }
 
   // 检查图片是否超高
   if(height > maxHeight){
       ratio = maxHeight / height; // 计算缩放比例
       $(this).css("height", maxHeight);   // 设定实际显示高度
       width = width * ratio;    // 计算等比例缩放后的高度
       $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
   }
});
});

如果不想加载jQuery库,可以用以下代码:

以下为引用的内容:

function ResizeImage(image, 插图最大宽度, 插图最大高度)
{
   if (image.className == "Thumbnail")
   {
       w = image.width;
       h = image.height;
 
       if( w == 0 || h == 0 )
       {
           image.width = maxwidth;
           image.height = maxheight;
       }
       else if (w > h)
       {
           if (w > maxwidth) image.width = maxwidth;
       }
       else
       {
           if (h > maxheight) image.height = maxheight;
       }
 
       image.className = "ScaledThumbnail";
   }
}

采用纯JavaScript的话,麻烦点,需要手动为图片加上class=”Thumbnail”,但最终效果是一样的。

标签:图片,尺寸,JavaScript
0
投稿

猜你喜欢

  • php基础知识:类与对象(5) static

    2023-07-24 03:01:30
  • python 3.7.0 安装配置方法图文教程

    2023-10-14 22:24:28
  • 关于人物角色设计讨论

    2008-10-16 13:47:00
  • Django添加bootstrap框架时无法加载静态文件的解决方式

    2023-04-16 07:27:44
  • Pytorch中Tensor与各种图像格式的相互转化详解

    2023-05-23 01:46:54
  • 如何在pycharm中快捷安装pip命令(如pygame)

    2023-02-26 14:53:25
  • Flash真的适合做网站应用吗?

    2011-04-16 10:34:00
  • Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项

    2021-11-15 18:53:31
  • Python的三种主要模块介绍

    2023-10-15 23:16:26
  • Windows Server2019安装MySQL5.7.25的方法

    2024-01-25 05:00:22
  • 为JavaScript程序添加客户端不可见的注释

    2008-05-31 08:02:00
  • Python利用Turtle绘制哆啦A梦和小猪佩奇

    2022-05-08 08:38:24
  • 详解vue中$nextTick和$forceUpdate的用法

    2024-06-05 09:15:44
  • Django stark组件使用及原理详解

    2021-08-31 16:17:11
  • 详解python使用Nginx和uWSGI来运行Python应用

    2023-07-25 20:40:55
  • Python3 中return和yield的区别

    2023-10-19 09:03:00
  • 使用Python的Dataframe取两列时间值相差一年的所有行方法

    2023-11-11 06:50:25
  • 如何解决SQLServer占内存过多的问题

    2008-12-18 15:01:00
  • PHP.vs.JAVA

    2023-11-17 20:28:51
  • Java开发之Spring连接数据库方法实例分析

    2024-01-26 02:00:54
  • asp之家 网络编程 m.aspxhome.com