`

解决图片显示比例匹配问题,我个人建议用js重新定义长宽

 
阅读更多

http://blog.csdn.net/ok7758521ok/article/details/1642557

 

<HTML>
<HEAD>
<TITLE>演示图片等比例缩小</TITLE>
<script>
function Wa_SetImgAutoSize(img)
{
//var img=document.all.img1;//获取图片
var MaxWidth=200;//设置图片宽度界限
var MaxHeight=100;//设置图片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比
var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比
//if(img.offsetHeight>1) alert(img.offsetHeight);
if(img.readyState!="complete"){
 return false;//确保图片完全加载
}

if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}

function CheckImg(img)
{
 var message="";
 var MaxWidth=1;//设置图片宽度界限
 var MaxHeight=1;//设置图片高度界限
 
 if(img.readyState!="complete"){
  return false;//确保图片完全加载
 }
 if(img.offsetHeight>MaxHeight) message+="/r高度超额:"+img.offsetHeight;
 if(img.offsetWidth>MaxWidth) message+="/r宽度超额:"+img.offsetWidth;
 if(message!="")
 {
 Wa_SetImgAutoSize(img);
 }
}
</script>
</HEAD>
<BODY>
<img src="http://video.5jia1.com/test/ndata//p_album/p_album/1/35/100555//36/s_1_p_album_98_0485160001168769990.jpg" border=0 id="img1" onload="CheckImg(this);">
<br>

</BODY>
</HTML>

 

分享到:
评论

相关推荐

    javascript 写的一个图片自动适应长宽比列的函数

    本文将深入探讨一个JavaScript函数,该函数能够确保在网页上加载的图片能够根据容器大小自动调整其尺寸,同时保持原始的长宽比例不变,从而避免图片在显示过程中出现变形或拉伸的情况。 #### 函数定义与参数说明 此...

    Halcon/C#混合编程原图比例放缩显示+UI交互+形状匹配定位

    本资源给出以下例程:基于Halcon算法的C#例程,功能包括能通过对话框选择图片,显示到hcontrolwindow控件中,并能保持任意图片的正确长宽比例,可以通过UI交互实现形状匹配模板的制作,可以通过已制作的形状模板文件...

    在图片加载完毕前js获取图片长宽尺寸

    要么就是等图片加载完毕后才开始获取,用户体验极其不好,今天特意整理一个办法,可以让javascript在html加载完毕后就可以立即获取img文件的头数据,非常快速的将图片的真实尺寸展现在你面前,使用企业也很简单。...

    屏幕长宽比的发展史和定义标准简介

    ### 屏幕长宽比的发展史与定义标准 #### 一、引言 屏幕长宽比(Aspect Ratio)是描述图像或显示屏形状的一种数学表示方式,通常用来衡量图像的宽度与高度的比例。这一概念在电影制作、电视广播、游戏开发、移动...

    图片按比例缩放

    比例缩放是指保持图片的长宽比,即纵横比不变,只改变其尺寸大小。如果不按比例缩放,图片可能会被拉伸或压缩,导致失真。在处理图像时,保持原图的比例是非常重要的,因为它可以确保图片内容的清晰度和视觉效果。 ...

    js图片等比例缩放

    在探讨“js图片等比例缩放”的主题时,我们深入解析了如何利用JavaScript来实现图片的等比例缩放,这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    通过上述修改,可以有效地解决kindEditor4.1版本中上传图片无法自适应的问题。关键是利用宽度的百分比计算来动态调整图片的大小,并且避免硬编码图片的高度,以保持图片的比例不变。这些修改不仅提高了用户体验,还...

    图片处理 ie控件 ,可定义图片长宽,按比例缩小,处理后图片文件存入本地文件夹

    以下为相关 js函数: function getStrechPic(sPicname,sPicDir,sPicExt, dPicWidth,dPicHeight,dFileName, desThumbFolder ) { /* 输入: 调用图片处理控件,对图片进行处理。 sPicname :源文件名称。 ...

    例用Image()获得图片的宽高并按比例显示

    例用Image()获得图片的宽高并按比例显示! 非常好用!

    图片缩放代码,等比例显示图片

    等比例显示图片是保持图像原始宽高比的关键,以免失真或变形。本篇文章将详细探讨如何实现图片的等比例缩放,以及在实际应用中的注意事项。 首先,我们要明白等比例缩放的概念。等比例缩放是指按照图像的原始宽高比...

    iOS Swift图片任意比例裁剪算法

    裁剪比例可以是任意值,但为了保持图片的长宽比,你需要计算出合适的裁剪宽度和高度。 3. **裁剪图片**: 使用`CGImage`和`CGContext`进行裁剪。首先,将`UIImage`转换为`CGImage`,然后创建一个新的`CGContext`,...

    用比例解决问题

    本部分将围绕“用比例解决问题”这一主题,详细解析在实际情景中如何运用比例进行计算和解决问题。比例问题广泛应用于地图阅读、工程计算、日常生活等多个领域。 1. 地图比例尺计算: 地图比例尺是指地图上的距离...

    python实现按长宽比缩放图片

    本文将介绍如何使用Python的PIL(Pillow)库来实现按长宽比缩放图片,并在缩放后填充空白部分为黑色。PIL库是Python的一个强大的图像处理模块,提供了丰富的图像处理功能。 首先,我们需要导入PIL库中的Image模块,...

    布局图片显示处理

    为了有效地解决这个问题,Android提供了多种`scaleType`属性,允许开发者自定义ImageView控件中图片的显示方式。下面将详细阐述各个`scaleType`的特性及其应用场景。 1. `android:scaleType="center"`:这种模式下...

    web网页按比例显示图片实现原理及js代码

    本文将详细介绍一种实现Web网页按比例显示图片的方法,并提供相应的JavaScript代码。 首先,需要了解在服务器端处理图片的常规方法。比如,在上传图片的时候,可以通过服务器端编程语言如ASP,结合ADODB.STREAM对象...

    等比例缩小图片的js

    在网页开发中,图片的展示效果常常需要进行调整,尤其是当图片尺寸过大或者不适应页面布局时,等比例缩小图片的JavaScript技术就显得尤为重要。本篇文章将深入探讨如何使用jQuery来实现这一功能,并且详细解释相关...

    用JavaScript自动生成等比例缩略图

    总结起来,用JavaScript自动生成等比例缩略图是通过监听图片加载、计算缩放比例、调整图片尺寸和保存/显示缩略图四个步骤实现的。这种方法在网页开发中非常实用,能有效提升用户体验,并有助于优化网站性能。

    PHP 图片正常比例显示 设置极限宽和极限高

    在PHP中,处理图片并确保它们以正常比例显示是一项常见的任务,特别是在网站开发中。保持图片比例至关重要,以免扭曲原始图像。以下是如何在PHP中设置极限宽和极限高,同时保持图片比例显示的方法: 首先,我们需要...

    AspJpeg统一所有缩略图比例问题的“99%完美”解决方案

    很多网站都需要上传大量的图片,很多情况下图片的尺寸,长宽比都互不相同,在页面显示时如果能分别指定其显示比例还好说,如果不能单独设定,例如在最常用的动易文章幻灯片显示和图片新闻列表显示里,都使用到相同...

    jquery在Chrome下获取图片的长宽问题解决

    总结一下,解决Chrome下获取图片长宽问题的关键在于确保在执行JavaScript代码时图片已经完全加载。可以采用以下两种策略: 1. 将JavaScript代码放置在`&lt;img&gt;`标签之后,依赖浏览器的默认行为来确保图片加载。 2. ...

Global site tag (gtag.js) - Google Analytics