用js按比例重定图片尺寸

2016-02-20 00:34 10 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐用js按比例重定图片尺寸,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

问题是一个网友提出来的,想要达到的效果是:如果是图片宽高比大于150/240,以宽为主,宽=150,高度自动,否则,以高为主,高=240,宽度自动,

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title无标题文档/title
/head
script type="text/javascript"
function pic(){
var p=document.getElementsByTagName("img");
 for(var i=0;ip.length;i++){
 pp=p[i];
  var pw = pp.width;
  var ph = pp.height; 
 
     if((150/240)(pw/ph)){
    pp.style.width = "auto";
    pp.style.height = "240px";
     }
     if((150/240)(pw/ph)){
    pp.style.width = "150px";
    pp.style.height= "auto";
     }
      }    
}
/script
body onLoad="pic()"
img src="http://www.webjx.com/files/allimg/071212/1605480.jpg" width="314" height="500"
img src="http://www.webjx.com/files/allimg/071212/1605481.jpg" width="552" height="432"
/body
/html

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

来源:http://www.tulaoshi.com/n/20160220/1632127.html

延伸阅读
今天在看视觉规范的时候,大高走过来说帮他们那边看一个问题。又是一个关于自适应的问题。不过,我喜欢。瞄了一下,需求是这样的:用户上传照片,照片的尺寸未知;需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中;如果图片太大,需要按比例缩放。如下图。   瞄了一下,居中可以用 text-align:center; 来实...
标签: word 压缩图片
Word 2007技巧:自动压缩图片尺寸 尽管用户可以在Word 2007文档中压缩所有图片或选中图片的尺寸,以减小Word文件的大小,但每次都执行压缩操作未免太繁琐。用户可以设置Word 2007图片压缩选项,实现在保存Word 2007文档时自动压缩图片尺寸的目的,操作步骤如下所述: 第1步,打开Word 2007文档窗口,选中任意图片。在打开的Word 2007...
标签: windows 操作系统
用数码相机拍摄的照片,通过数据线传到电脑上后尺寸比较大。为了方便浏览,我们通常都在Photoshop等专业图像处理软件中一张张来调整图片的大小。其实还有更多更方便简捷的方法来完成。 一、在ACDSee中调整 ACDSee是目前最流行的数字图像处理软件,批量调整图片尺寸对它来说简直是“小菜一碟”。 1.打开ACDSee 7.0(至...
标签: Web开发
自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了。 主要方法写在SetImgSize.js里面 SetImgSize.js  1 //智能微缩图片JS方法  2 //参数:imgID(图片的标识ID)  3 //参数:maxWidth(图片的最大宽度,值为0则表示不限制宽度)  4 //参数:maxHeight(图片的最大高度,值为0则表示不...
Linux系统如何批量压缩图片尺寸大小 现在的数码相机拍摄出来的照片像素都很高,大部份都会超过此限制,很多时候我们都要对图片进行批量压缩,Linux系统下如何批量压缩图片尺寸大小呢? 一个比较好用命令行下可以使用的 强大的免费图片工具 ImageMagick Centos系统的安装使用方法: yum install ImageMagick 再输入y确...

经验教程

983

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部