js图片等比缩放

最新推荐文章于 2023-11-08 09:25:24 发布
最新推荐文章于 2023-11-08 09:25:24 发布
阅读量3.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript image function border xhtml html

<script type="text/javascript">

function rs(el){
//首先判断图片是长的还是宽的。如果是长的就对宽进行变形，否则对高进行变形
(el.width>el.height)?el.width = Math.min(65,el.width):el.height = Math.min(65,el.height);
}
</script>
<!-- 当图片加载完成后调用函数,记得下面不要限制住长和宽 -->
<img οnlοad="rs(this)" src="http://www.emlily.cn/attachments/month_0812/2009.jpg"/>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>

调用：<img src="images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

js图片等比缩放
2008-07-04 09:14


<script language="JavaScript" type="text/JavaScript">
var ResizeIndexWidthMax=120
function resizeIndexByWidth(){
var imgs=document.images
for(var i=0;i<imgs.length;i++){
if(imgs[i].getAttribute("resize",false)!="1"){continue;}
if(imgs[i].width<=ResizeIndexWidthMax){continue;}
imgs[i].width=ResizeIndexWidthMax
imgs[i].outerHTML = imgs[i].outerHTML
}
}
</script>

 

<script language="JavaScript" type="text/JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,Width,Height){
var image=new Image();
var iwidth = Width; //定义允许图片宽度，当宽度大于这个值时等比例缩小
var iheight = Height; //定义允许图片高度，当宽度大于这个值时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}

ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//调用：<img src="图片" οnlοad="javascript:DrawImage(this)">
//-->

</script>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery等比缩放图片
2009-11-27 15:39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按比例自动缩放图片</title>
<script type="text/javascript" src="jquery.js"></script>

<SCRIPT LANGUAGE="JavaScript">
<!--
function DrawImg(imgId,boxWidth,boxHeight)
{
alert(boxWidth);
var imgWidth=$("#"+imgId).width();
var imgHeight=$("#"+imgId).height();
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
$("#"+imgId).width((boxHeight*imgWidth)/imgHeight);
$("#"+imgId).height(boxHeight);
//让图片居中显示
var margin=(boxWidth-$("#"+imgId).width())/2;
$("#"+imgId).css("margin-left",margin);
}
else
{
//重新设置img的width和height
$("#"+imgId).width(boxWidth);
$("#"+imgId).height((boxWidth*imgHeight)/imgWidth);
//让图片居中显示
var margin=(boxHeight-$("#"+imgId).height())/2;
$("#"+imgId).css("margin-top",margin);
}
}

//-->
</SCRIPT>
</head>
<body>
<div id="imgBox" style="width:100px;height:125px;border:1px solid red;overflow:hidden">
<img id="img1" alt="" src="3620424_medium222.jpg" οnlοad="DrawImg(this.id,90,80);" />
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

js图片等比缩放

<script language="JavaScript" type="text/javascript">
<!--
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
//-->
</script>

<img src="XXXX" alt="自动缩放后的效果" οnlοad="javascript:DrawImage(this,"200","200");" />

图片外边框
<table width='150' height='150' border='0' cellpadding='0' cellspacing='0' style='border: 1px solid #666666; display:block; width:150px; height:150px;padding:50px;'>
<tr>
<td width='300' height='68' align='center'>&nbsp;</td>
</tr>
</table>

lzqial1987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css+js完美控制图片大小
12-08
使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。 css+js完美控制图片大小 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js实现大图片等比例缩放
可控的事情要谨慎，不可控的事情要乐观。
12-27 1479
1.描述 首先看缩放前： 缩放后效果： 2.实现： 主要是在下面的body标签上调用onload <body onload="ResizeImages()"> <div class="w1170"> <div class="pLeft"> <div class="data_list"> <d...
js实现图片压缩、分辨率等比例缩放
最新发布
weixin_43019353的博客
11-08 909
js图片缩放，图片压缩
js等比例缩放图片
zyc922的博客
02-03 392
function changeImg(objImg) {     var most = 300;        //设置最大宽度     var height = 200; //设置最大高度     if(objImg.width > most)     {         var scaling = 1-(objImg.width-most)/objImg.width;    
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2265
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
JS图片等比缩放
12-07
产品图与缩略图共用一个图片时，缩略图等比缩放，不变形。
javascript实现获取图片大小及图片等比缩放的方法
10-21
主要介绍了javascript实现获取图片大小及图片等比缩放的方法,涉及javascript针对图形图像相关属性获取与修改相关操作技巧,需要的朋友可以参考下
JavaScript等比例缩放图片控制超出范围的图片
12-11
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，软件开发网以稳定页面布局，本代码段就是完成...
JQuery实现等比缩放图片插件
06-10
JQuery实现等比缩放图片插件，有需要的可以参考使用。
php和js对数据库图片进行等比缩放示例
10-26
主要介绍了php和js如何对数据库图片进行等比缩放,需要的朋友可以参考下
JavaScript 实现图片等比缩放
web前端开发
02-01 970
来源 |https://www.lebang2020.cn/details/210124ycbfvuqd.html在开发网页的时候少不了图片，展示图片时自然会遇到缩放问题。一般情况下只...
用javascript实现图片等比例缩放
Lankecms
04-22 2341
js部分： $(window).load(function() {   ImageAutoResize('div[id=demotu]');   function ImageAutoResize(findstr)   {    var maxWidth = $(findstr).css("width").replace('px','');    var
JS实现图片宽高的等比缩放
aoyao9431的博客
01-09 516
关于图片宽高的等比缩放，其实需求就是让图片自适应父容器的宽高，并且是等比缩放图片，使图片不变形。 例如，需要实现如下的效果： 要实现上面的效果，需要知道图片的宽高，父容器的宽高，然后计算缩放后的宽高。 首先，图片的宽高和父容器的宽高都能方便的获取到，然后，等比缩放的算法如下： 1 function scalingImage(imgWidth, imgHeight, co...
JS等比例缩放图片
weixin_30716141的博客
05-23 65
functionDrawImage(ImgD,iwidth,iheight){varimage=newImage();image.src=ImgD.src;if(image.width>0&&image.height>0){flag...
js 完成对图片的等比例缩放的方法
dekai6197的博客
12-11 206
1 /* 2 重新按比例设置 页面上对应图片的长和高， 3 */ 4 function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { 5 var width = 0; 6 var height = 0; 7 // 按比例缩小图片的算法 8 if(...
JS等比例缩放图片以及让图片水平垂直居中显示
weixin_33953384的博客
01-16 168
　　1：在客户端等比例缩放图片 &lt;script language="JavaScript"&gt;&lt;!--//等比例缩放图片 var flag=false; /**   * ImgD：原图   * maxWidth：允许的最大宽度   * maxHeight：允许的最大高度   */ function DrawImage(ImgD, maxWidth, maxHeight){  va...
图像缩放中像素坐标的变换
qq_43633856的博客
11-09 4218
srcx=dstx⋅scr_widthdst_widthsrc_x=dst_x\cdot \frac{scr\_width}{dst\_width}srcx​=dstx​⋅dst_widthscr_width​ srcx=(dstx+0.5)⋅scr_widthdst_width−0.5src_x=(dst_x+0.5)\cdot \frac{scr\_width}{dst\_width}-0.5srcx​=(dstx​+0.5)⋅dst_widthscr_width​−0.5 ...
OpenCV 图片尺寸缩放——resize函数
热门推荐
流楚丶格念的博客
11-21 1万+
文章目录OpenCV中的缩放：resize函数代码案例 OpenCV中的缩放： 如果要放大或缩小图片的尺寸，可以使用OpenCV提供的两种方法： resize函数，是最直接的方式； pyrUp，pyrDown函数，即图像金字塔相关的两个函数，对图像进行上采样和下采样的操作。关于上采样和下采样可以参考我的另一篇文章 ：https://blog.csdn.net/weixin_45525272/article/details/121446923 resize函数 函数原型： void cv::resize(
uniappcanvas实现图片等比缩放
06-03
要在uniapp中实现图片的等比缩放，可以使用canvas来进行处理。具体步骤如下： 1. 获取图片信息 使用uniapp提供的uni.getImageInfo()方法获取图片的信息，包括宽度和高度等。 2. 计算缩放比例 根据需要缩放的大小...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值