<!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>By：DragonDean</title>
<style type="text/css">
.sy_pic{ width:200px; height:200px; text-align:center;}
</style>
<script type="text/javascript">
window.onload = function () {
changeImgSize();
}
function changeImgSize() {
var getContainer = document.getElementById('imgcontainer');
var getIMG = getContainer.getElementsByTagName('img')[0];
var fw = getContainer.offsetWidth - (2 * getContainer.clientLeft);
var fh = getContainer.offsetHeight - (2 * getContainer.clientTop);
var iw = getIMG.width;
var ih = getIMG.height;
var m = iw / fw;
var n = ih / fh;
if (m >= 1 && n <= 1) {
iw = Math.ceil(iw / m);
ih = Math.ceil(ih / m);
getIMG.width = iw;
getIMG.height = ih;
}
else if (m <= 1 && n >= 1) {
iw = Math.ceil(iw / n);
ih = Math.ceil(ih / n);
getIMG.width = iw;
getIMG.height = ih;
}
else if (m >= 1 && n >= 1) {
getMAX = Math.max(m, n);
iw = Math.ceil(iw / getMAX);
ih = Math.ceil(ih / getMAX);
getIMG.width = iw;
getIMG.height = ih;
}
if (getIMG.height < fh) {
var getDistance = Math.floor((fh - getIMG.height) / 2);
getIMG.style.marginTop = getDistance.toString() + "px";
}
}
</script>
</head>
<body>
<div class="sy_pic" id="imgcontainer"><img src="/images/test.jpg" /></div>
</body>
</html>

纯js实现div内图片自适应大小的更多相关文章

  1. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  2. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  3. 一段JS控制TD中图片的大小的代码

    一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...

  4. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  6. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  7. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  8. iOS HTML 字符串中的图片 自适应大小

    本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候  后台给的数据室一串HTML 的字符串  但是 我们要显示出来  这 ...

  9. Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

    由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...

随机推荐

  1. C语言之链表————（转载）

    #include <stdio.h>#include <malloc.h>#define LEN sizeof(struct student) /*-------------- ...

  2. iOS应用崩溃日志分析－备用

    作为一名应用开发者,你是否有过如下经历?   为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应用商店后,还是有用户抱怨会闪退 ! ...

  3. 基本套接字总结（@function）

    最近学习了下UNIX下的网络编程.为了以后查询方便,总结在这里. 首先套接字的地址定义: IPv4地址和IPv6地址定义见<netinet/in.h>头文件定义.为了能够顺利转换不同的套接 ...

  4. Qt编程之对QGraphicsItem点击右键弹出菜单

    就是对这个contextMenuEvent 事件重新实现,在这个事件函数中创建菜单,大概就是这样. void MyItem::contextMenuEvent(QGraphicsSceneContex ...

  5. codility上的问题 （19）Sigma 2012

    题目: 像最大直方图一样给定一个数组是每个单位长度上的高度,求至少几个矩形可以拼出这个形状. 例如:给出的数组 H[0] = 8 H[1] = 8 H[2] = 5 H[3] = 7 H[4] = 9 ...

  6. zoj2112

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2112 经典的动态区间第K大. 用树状数组套线段树. 对原数组建一个树 ...

  7. win8开机密码忘了怎么办

    原文地址:http://zhidao.baidu.com/question/582486883100064325.html windows8系统虽然让众用户用着不习惯,但是还是拥有大批追随者.今天,绿 ...

  8. UGUI 下拉滚动框

    开始制作好友系统了, 发现有一个UI跟QQ的面板一模一样. 于是就写了一个公共的下拉滚动框.需要把按钮的中心点(pivot.y = 1),描点为最上方 直接上图吧 代码如下: using UnityE ...

  9. （转载）图片左右滚动控件（带倒影）——重写Gallery

    今天在网上找了些资料,做了一个图片左右滚动的Demo,类似幻灯片播放,同时,图片带倒影效果,运行效果如下图: 实现方式是重写Gallery,使用自定义的Gallery来实现这一效果,工程一共三个文件, ...

  10. [Oracle]Sqlplus连接成功，但pl/sql连接不成功，提示“ora-12145:无法解析指定的连接标识符”

    Oracle客户端安装成功后,使用Net Manager配置成功,测试服务成功.使用Sqlplus连接成功.但使用pl/sql developer连接总是提示“ora-12145:无法解析指定的连接标 ...