js控制图片自动缩放，实现铺满盒子，不变形，完全局中
此js一般用于控制图片铺满盒子，但是比例不变，并且绝对局中
原理：判断图片的高宽与盒子高宽的大小的关系，然后通过比例来控制图片的缩放及定位 <!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;}
</style>
</head>
<body>
<div id="img"><img src="data:images/test_01.png" onload="resize_img(this,600,400)" /></div>
</body>
</html>
<script type="text/javascript">
function resize_img(pic,w,h){//参数
var re_new_size=function(r){
//根据比率重新计算宽度
return {w:pic.width/r,h:pic.height/r};
};
var re_offset=function(n){
//根据新的宽高度返回偏移量
return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};
};
var re_position=function(o,n){
//重新定位图片
pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";
};
var execute=function(rate){//总执行函数
var new_size=re_new_size(rate),
offset_new=re_offset(new_size);
re_position(offset_new,new_size);
}; //判断变量
var rate_of_w=pic.width/w,
rate_of_h=pic.height/h,
rate;
if(rate_of_w>=1){
//图片宽度大于显示区域宽度
if(rate_of_h>=1){
//且图片高度大于显示区域高度
rate=Math.min(rate_of_w,rate_of_h);
}else{
//图片高度小于显示区域
rate=pic.height/h;
}
}else{
//图片宽度小于显示区域宽度
if(rate_of_h>=1){
//且图片高度大于显示区域高度
rate=pic.width/w;
}else{
//图片高度小于显示区域高度
rate=Math.min(rate_of_w,rate_of_h);
}
}
execute(rate);
//执行入口
}
</script>
js控制图片自动缩放，实现铺满盒子，不变形，完全局中的更多相关文章
- js 控制图片大小核心讲解
控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- java实现图片和pdf添加铺满文字水印
依赖jar包 <!-- pdf start --> <dependency> <groupId>com.itextpdf</groupId> <a ...
- Qt5：随窗口大小变化背景图片自动缩放的实现
在窗口程序中,当我们改变窗口大小的时候,背景图片通常会岁窗口大小变化而缩放 然而,在我们写的窗口程序中,设置背景图片后,如果缩放大小,会看到背景图片并不会随之缩放, 应为这需要特殊处理,一般常用的方法 ...
- arcgis for js 根据多边形自动缩放
交代背景:多边形已经渲染在图层上,然后根据多边形自动缩放值合适的大小: 思路:获取图层信息,获取图层中的几何信息,获取图形范围信息,在地图上设置范围:(下面的方法有封装)记一下思路就好 var pol ...
- .js控制一次加载一张图片，加载完后再加载下一张
js怎么控制一次加载一张图片,加载完后再加载下一张 (1)方法1 (1)方法2
- js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...
- JS控制图片显示的大小（图片等比例缩放）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Spring Cloud Ribbon 整合 Hystrix
在前面随笔 Spring Cloud 之 Ribbon 的ribbon工程基础上进行改造 1.pom.xml 加入依赖 <dependency> <groupId>org.sp ...
- 如何利用panel在一个窗口中实现诸多页面的显示
Book_register form11 = new Book_register();//new一个对象 form11.TopLevel = false;//去除子窗体的顶级窗体设置 form11.P ...
- 前端页面适配的rem换算
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
- Aurora Player 开源啦~~~
上一年做了很久的项目,是一个完整版的视频播放器,强大.美观!!! 现在转投UWP了,决定开源这个项目. 在你下载本项目之前,请仔细阅读每一行字,以免以后引起不必要的法律纠纷. 本项目最终解释权归本人所 ...
- Maven项目pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径)
在今天的学习Maven项目中遇到的这个错误:pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径) 在Maven项目学习中,缓存问 ...
- Java数据结构和算法（八）——递归
记得小时候经常讲的一个故事:从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和尚讲了一个故事,故事内容是“从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和 ...
- IDEA 无法运行Junit, 报错Class not found xxxx Empty test suite.
网上搜了一圈没找到答案, 最后才发现是因为testmodule没有把class编译到主代码编译的路径.
- 大数据学习系列之六 ----- Hadoop+Spark环境搭建
引言 在上一篇中 大数据学习系列之五 ----- Hive整合HBase图文详解 : http://www.panchengming.com/2017/12/18/pancm62/ 中使用Hive整合 ...
- Maven构建真正的J2EE项目
今天同事问起我眼下用Maven构建的多模块项目架构和曾经用Eclipse创建的Web项目的问题.以下将讲一下使用maven搭建多模块的J2ee项目,以及採用这样的方式搭建项目对日后项目的水平拆分和垂直 ...
- Bootstrap的js插件之按钮(button)
1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态 ...