将图片按比例缩小显示

最新推荐文章于 2019-08-01 00:47:23 发布
最新推荐文章于 2019-08-01 00:47:23 发布
阅读量529 收藏
点赞数
分类专栏： Web前端 文章标签： javascript image border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/e_yohn/article/details/7634912
版权

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
 var image=new Image();
 image.src=ImgD.src;
 if(image.width>0 && image.height>0){
  flag=true;
  if(image.width/image.height>= 500/500){
   if(image.width>500){
    ImgD.width=500;
    ImgD.height=(image.height*500)/image.width;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
   ImgD.alt=image.width+"x"+image.height;
  }
  else{
   if(image.height>500){
    ImgD.height=500;
    ImgD.width=(image.width*500)/image.height;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
   ImgD.alt=image.width+"x"+image.height;
  }
 }
}
</script>
</HEAD>

<BODY>
<img src="a.jpg" border="0" width="500" height="500" οnlοad="javascript:DrawImage(this);">
</BODY>
</HTML>

 

e_yohn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现图片按比例缩放问题操作
10-14
主要介绍了vue实现图片按比例缩放问题操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html图片怎么等比例缩放？html img图片缩放方法总结(附实例)
web前端入门基础进阶教程-htmlcssjs
06-18 1万+
本篇文章主要的介绍了关于html img标签图片的等比例缩放的介绍和使用实例，最后还有关于html img标签图片等比例缩放的总结，接下来让我们一起来看这篇文章吧 首先我们先看看html img图片如何等比例缩放： 在DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩
C#利用Graphics类绘制进阶--实现图片等比例缩放
马儿不吃草
06-28 9140
今天要用到，操作可以像画图工具一样，图片内容等比例缩放。但是在网上找了几个等比例缩放的方法，试了发现都是有问题的，基本都是你抄他，他抄你，而且也不试试这个方法到底能不能用就瞎抄。最后自己去看Graphic类的元数据才找到解决方法。直接贴代码：public Bitmap getnew(Image bit,double beishu)//beishu参数为放大的倍数。放大缩小都可以，0.8即为缩小至原...
将页面上的图片等比例缩放显示出来
03-05 962
页面上加上这段脚本   控制 Image 控件缩放图片。      function DrawImage(ImgD) {          var image = new Image();          var iwidth = 800;          var iheight = 600; //定义允许高度，当宽度大于这个值时等比例缩小          image.src
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
幻昼
01-21 5万+
在DIV_CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。 解决方法有两种： 第一种，让图
Android开发之imageView图片按比例缩放的实现方法
09-02
主要介绍了Android开发之imageView图片按比例缩放的实现方法,较为详细的分析了Android中ImageView控件的scaleType属性控制图片缩放的具体用法,需要的朋友可以参考下
js按比例缩放图片且垂直居中显示图片
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1848912
web网页按比例显示图片实现原理及js代码
10-27
由于上传图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观地显示，本文将为大家简单的介绍一种比较不错的方法，有此需求的朋友可以参考下
JS等比例缩小图片尺寸的实例
10-27
JS等比例缩小图片尺寸的实例，需要的朋友可以参考一下
在网页中按等比例大小显示图片，图片不变形
04-10
在网页中按等比例大小显示图片，图片不变形
如何简单实现响应式式图片等比例缩放
大前端小王子
01-23 7021
Tips:本文主要介绍CSS3的background-size属性，实现响应式式图片等比例缩放。 （一）基本语法 基本语法：background-size: length | percentage | cover | contain; （可参照w3c的为准） length 该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会
图片等比例缩小
feiniaoxinglanzi的博客
08-29 1886
          目前项目中有个需求是将同一张图片显示在不同的页面上，但是因为页面给予的容器大小不一，这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性，个人感觉用起来非常方便。如下：      &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
JS控制图片显示的大小（图片等比例缩放）
naxsu的专栏
04-19 542
[code="html"] 最新javascript自动按比例显示图片，按比例压缩图片显示 function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; ...
页面图片显示(按比例缩放）
u010448864的博客
03-17 738
[code="js"] function scaleImage(ImgD, FitWidth, FitHeight){ var width = ImgD.width, height = ImgD.height; var w = width / FitWidth, h = height / FitHeight; if (w >= h) { //宽度固定，高度缩放 ...
图片（img）的等比例自动缩放
千千
06-17 5万+
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 最近做公益项目用到了这个。根据父容器的自动缩放，并保持图片原来的比例...
如何让图片按比例响应式缩放、并自动裁剪的css技巧
热门推荐
onlyhom's notebook
01-18 6万+
如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不想让图片拉伸变形，自
图片等比例缩放、小图看大图、及图片加载 的一些总结
weixin_30391339的博客
08-01 296
<body style="margin:0px" onload="DrawImage(45,45);"> 　　<div id=m style="position:absolute;top:0;display: none;left:0;filter: alpha(opacity=100);z-index: 100" >　　　　<img src="">　　&l...
完美解决glide+StaggeredGridLayoutManager 图片加载大小不正常的问题
SongCongCong_scc
12-10 2018
先说下我的目标,公司要求每张图片宽度是充满item的,高度是根据图片高度缩放的,所以要求用瀑布流实现, 但是我当我用SwipeToLoadLayout 做下拉刷新的时候,发现每次加载图片,大小都有可能不一样,但是 首次加载的时候. 图片显示是正常的,我猜测,这个跟glide的图片缓存有关系, 但是当我设置 glie的skipMemoryCache(true),不让他缓存 还
javafx怎么将用户上传的图片按比例缩小显示
最新发布
06-09
如果你想要将用户上传的图片按比例缩小显示，可以使用JavaFX中的ImageView控件和Image类来实现。具体实现步骤如下： 1. 获取用户上传的图片文件，并使用Image类创建一个Image对象。 ```java File file = new File("path/to/image.jpg"); Image image = new Image(file.toURI().toString()); ``` 2. 获取ImageView控件并设置其宽度和高度，以及图像的裁剪方式。 ```java ImageView imageView = new ImageView(image); imageView.setFitWidth(300); //设置宽度 imageView.setPreserveRatio(true); //保持宽高比例 imageView.setSmooth(true); //平滑处理 imageView.setCache(true); //缓存 ``` 3. 将ImageView控件添加到界面中。 ```java Pane pane = new Pane(); pane.getChildren().add(imageView); ``` 这样，你就可以按比例缩小用户上传的图片并显示在界面中了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值