`
tara1128
  • 浏览: 26166 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

对网络图片显示的尺寸缩放的处理

阅读更多
页面中获取了一个图片的URL,
然后赋值给img元素的src属性,
图片即可显示在页面中。

但是在页面中显示时,
如果需要对显示图片的尺寸做限制,
就需要一些额外的处理了,
同时也要考虑到图片加载甚至异步的问题。

我们可以在img的onload里写一个function:
<img src="" onload="imgOnload(this)" />
然后对这个function做一些定义:
function imgOnload( el ){
  var w = el.width, h = el.height; //在onload里可以直接拿到img的width和height
  if( w > h ){  //对宽高做一下比较
    el.height = 296; //重写img的height
  }else{
    el.width = 296; //重写img的width
  }
}

这样一来,当图片是一个扁形的(w > h),
则把高设置为目标尺寸,
如果图片是一个长条形的(h > w),
则把宽设置为目标尺寸。

以上的变化,只设置宽高其中一个属性,
另外一个属性,是可以自动的等比缩放的。

一定要在onload里去做这件事。
分享到:
评论

相关推荐

    图片压缩缩放处理工具

    本文将详细解析"图片压缩缩放处理工具"的相关知识点,旨在帮助用户理解和掌握如何有效地管理和优化图像资源。 首先,我们来探讨图片压缩。图片压缩的主要目的是减少文件大小,从而节省存储空间和提高网络传输效率。...

    图片压缩、图片等比缩放软件

    在IT领域,图片压缩和等比缩放是两个常见的图像处理任务,对于存储、传输和显示图片至关重要。本文将深入探讨这两个概念,并介绍一款名为XnView的实用工具。 图片压缩是指减小图像文件大小的过程,目的是在不显著...

    自定义ImageView图片缩放

    本文将深入探讨如何自定义一个ImageView来实现图片的网络获取与适应性缩放,这对于我们处理图片展示,尤其是网络图片,有着非常实用的价值。 首先,我们要明白自定义ImageView的主要目标是解决图片在不同设备和屏幕...

    pb开发的图片尺寸缩小程序

    在实际应用中,这样的图片尺寸缩放程序可能用于Web应用、桌面应用或者移动应用,帮助用户快速调整图像大小,以满足各种应用场景的需求。开发者可能需要了解图像处理的基本原理,如像素操作、图像比例保持、抗锯齿等...

    图像的缩放

    **图像缩放在各种领域都有广泛的应用**,例如在数字摄影中调整图片大小以便于网络分享,网页设计中适应不同屏幕尺寸,或是医学成像和遥感图像分析中为了查看特定区域的细节。在软件开发中,图像缩放的库和函数也非常...

    UIScrollerView的照片缩放

    标题"UIScrollerView的照片缩放"指向了一个利用UIScrollView来处理图片缩放功能的实现,特别是在解决图片缩放后周边留白的问题上找到了一个解决方案。描述中提到的“代码简单”,意味着这个实现可能通过巧妙的布局和...

    从网络获取图片按图片原大小显示

    在Android开发中,显示图片是一项常见的任务,但如何让图片按照原始尺寸显示,而不进行缩放,有时会成为一个挑战。标题“从网络获取图片按图片原大小显示”和描述所指出的问题,通常涉及到图片加载库的使用、图像...

    pagerView异步加载网络图片,图片缩放、旋转

    常见的异步加载图片库有SDWebImage和Kingfisher,它们提供了便捷的方法来处理网络图片的加载、缓存和显示。 对于图片的缩放和旋转,我们可以利用UIKit中的UIImageView及其扩展。UIImageView支持显示、缩放和旋转...

    移动端H5图片轮播缩放

    而"移动端H5图片轮播缩放"插件是这个框架的一个扩展,旨在优化图像显示和交互。 1. **图片轮播**:此插件实现了通过手指滑动来切换图片的功能。这种手势识别技术使得用户可以通过自然的手势操作,流畅地在多张图片...

    js图片自动缩放功能

    在网页中处理图片时,我们常常需要实现图片自动缩放的功能,以便适应不同设备的屏幕尺寸或者保持页面布局的美观。本文将详细介绍如何使用JavaScript实现图片自动缩放,并探讨相关技术点。 首先,图片自动缩放的核心...

    IOS屏幕图片循环切换缩放

    为了保持性能,可以考虑使用UIImage的`imageWithContentsOfFile:`方法加载本地资源,或者使用SDWebImage库加载网络图片。最后,别忘了设置ScrollView的代理为当前ViewController,并实现对应的代理方法。 总之,...

    GIF图片缩放软件

    GIF图片缩放并非简单的像素缩放,因为不正确的处理可能会导致图像质量下降,包括模糊、锯齿边缘或者动画帧之间的同步问题。一款好的GIF缩放软件应该具备以下特点: 1. **保持质量**:软件应具备高级的图像处理算法...

    照片压缩缩放处理工具绿色版

    用户可以一次性对大量图片进行压缩和缩放处理,这大大节省了反复操作的时间,提升了工作效率。无论是整理家庭照片,还是批量处理工作项目中的图片,用户都能享受到软件带来的便利。 综合来看,《照片压缩缩放处理...

    Android平台的图像控件,可以异步加载网络图片、项目资源和本地图片,并且支持双指缩放、图片的基本处理.zip

    在Android平台上进行应用开发时,图像控件是一个非常关键的部分,因为它们负责显示各种类型的内容,包括网络图片、项目资源和本地文件。本项目重点介绍了如何实现一个功能强大的图像控件,它支持异步加载图片并具备...

    Android 网络图片缓存缩放框架.zip

    3. **图片缩放**:考虑到不同的设备屏幕尺寸和分辨率,框架能根据需求对图片进行缩放,以适应不同的显示环境。这通常包括按比例缩放,确保图片在不同大小的屏幕上都能正确显示,而不会因为过大或过小影响视觉效果。 ...

    ios-图片切换,点击缩放.zip

    在缩放过程中,为了保持用户可以继续滚动查看其他图片,需要处理好ScrollView的contentOffset和contentSize。 为了使图片缩放更加流畅,可能还需要考虑性能优化。例如,对于大图,可以使用UIImage的`initWithData:...

    图片缩放

    在实际应用中,我们经常需要调整图片的尺寸,以适应不同的显示设备或满足网络传输的需求。本文将深入探讨图片缩放的相关技术,并结合提供的"ImageTest"文件,探讨其可能的实现方式。 首先,我们需要理解图片的基本...

    iOS 图片裁剪 自定义大小 图片可缩放

    它负责加载、显示和处理图片,包括从文件或网络获取图片、调整图片大小以及裁剪图片等。 2. **自定义裁剪区域**:要实现自定义裁剪功能,我们需要创建一个矩形裁剪框,用户可以在这个框内选择想要的部分。这通常...

Global site tag (gtag.js) - Google Analytics