牛掰的图片等比缩放js代码
function resizeImg(img,oAW,oAH){
var oimgW = img.width,
oimgH = img.height,
oimg = img,
oY = (oimgH/oimgW).toFixed(2),
oX = (oimgW/oimgH).toFixed(2);
if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
oimg.style.height = oimgH+'px';
oimg.style.width = oimgW+'px';
} else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
if(oY*oAW>=oAH){ //图片高比宽大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
}else{ //图片高比宽小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
}
}else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
}else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
}
}
function resizeImgMid(img,oAW,oAH){
var oimgW = img.width,
oimgH = img.height,
oimg = img,
oY = (oimgH/oimgW).toFixed(2),
oX = (oimgW/oimgH).toFixed(2);
if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
oimg.style.height = oimgH+'px';
oimg.style.width = oimgW+'px';
oimg.style.marginLeft = 1/2*(oAW-oimgW)+'px';
oimg.style.marginTop = 1/2*(oAH-oimgH)+'px';
} else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
if(oY*oAW>=oAH){ //图片高比宽大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
oimg.style.marginTop = 0;
}else{ //图片高比宽小
oimg.style.width = oAW+'px';
oimg.style.height = oY*oAW+'px';
oimg.style.marginLeft = 0;
oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
}
}else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
oimg.style.marginLeft = 0;
oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
}else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
oimg.style.marginTop = 0;
}
}
牛掰的图片等比缩放js代码的更多相关文章
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- 图片左右滚动的js代码
html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- 网页上图片点击放大js代码
//图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...
- iphone手机端图片错位修正的js代码
<script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...
- 做了一个图片等比缩放的js
做了一个图片等比缩放的js 芋头 发布在view:8447 今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...
- previewImage.js图片预览缩放保存插件
previewImage.js好用的图片预览缩放保存插件
- 图片的滑动缩放html、css、js代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- qsort的几种用法
#include<stdio.h> #include<stdlib.h> int cmp(const void *a,const void *b){ return *(int ...
- Akka边学边写(2)-- Echo Server
EchoServer 上篇文章里,我们用Akka写了一个简单的HelloWorld样例,对Akka(以及Actor模式)有了初步的认识.本文将用Akka写一个EchoServer,看看在Actor的世 ...
- LoadRunner如何在注册业务脚本中设置参数化唯一性
LR在录制一个网站注册业务的脚本时,突然间遇到一个问题:注册时,由于注册用户需要验证唯一性,所以在LR回放脚本时,用Run-time Viewer工具回放可以发现(先在脚本中设置几个断点),真实运行的 ...
- strcpy与memcpy的区别
strcpy和memcpy的区别 strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制 ...
- PHP安装mcrypt.so报错 mcrypt.h not found 的解决办法
报错内容:configure: error: mcrypt.h not found. Please reinstall libmcrypt 网上搜索了很多,包括自带的 yum install libm ...
- heroku
一个可以在上面部署自己的应用一个共享平台,例如可以部署访问google的代理 地址为:https://www.heroku.com/
- 那些 Cynthia 教我的事 之 PMSec (三)
在项目中,聪明的Jenny童鞋提了一个suggestion,即将同一个店同一人提交的请求,经过上级批准之后,邮件内容需要合并. 非常滴合理有木有~~ 提交十个申请,将收到十封邮件,的确不友好哦.可是由 ...
- union以及一些扩展
select name,age from Students where Age<3unionselect name ,age from Students where Age >4--两个结 ...
- html 基础之 <link>标签
实例 链接一个外部样式表: <head> <link rel="stylesheet" type="text/css" href=" ...
- [Effective Modern C++] Item 3. Understand decltype - 了解decltype
条款三 了解decltype 基础知识 提供一个变量或者表达式,decltype会返回其类型,但是返回的内容会使人感到奇怪. 以下是一些简单的推断类型: ; // decltype(i) -> ...