<!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. 这样就算会了PHP么？-7

    循环之类的例子 <script language="javascript"> function calculate(a, b) { return a * b; } do ...

  2. NSIS如何对一整个目录文件夹（包括子文件夹和其中的文件）压缩

    原来不加/r参数,NSIS编译器就会不认识文件夹啊. File /r [dir] Reference: http://stackoverflow.com/questions/7973242/nsis- ...

  3. 2015第22周一Web性能测试工具及IE扩展区别

    在高性能web测试工具推荐http://www.jb51.net/article/23034.htm中发现了dynaTrace 感觉很不错,不但可以检测资源加载瀑布图,而且还能监控页面呈现时间,CPU ...

  4. AS3给显示对象加边框

    给显示对象加边框,可以有以下三种方法1.根据相交路径的缠绕规则的奇偶规则法(使用奇偶缠绕规则时,任何相交路径都交替使用开放填充与闭合填充.如果使用同一填充绘制的两个正方形相交,则不会填充相交的区域.通 ...

  5. SDN,NFV

    CAPEX,capital expenditures  投资成本OPEX,Operating Expense 运营费用space & power consumption 图解NFV与SDN关系

  6. java 面试基础典型题及答案

    1.switch能否作用在byte.int.long.String? 答案:switch能作用在byte.int.enum常量, 补充:jdk7可以作用在String上 2.short s = 1; ...

  7. StroyBoard中UICollectionView中添加Header和footer

    到Storyboard中,选择collection view controller中的"Collection View".在Attributes inspector中,选择&quo ...

  8. HDU 4907 Task schedule

    对于询问q 假设q不存在直接输出q 否则输出后面第一个不存在的数 从2*10^5到1遍历一边ac #include<bits/stdc++.h> using namespace std; ...

  9. [转]使用Composer管理PHP依赖关系

    简介 现在软件规模越来越大,PHP项目的开发模式和许多年前已经有了很大变化.记得初学PHP那会儿,boblog是一个很好的例子,几乎可以代表 PHP项目的开发模式.当时PHP 5.x以上的版本刚开始流 ...

  10. 【Linux】linux经常使用基本命令

    Linux中很多经常使用命令是必须掌握的,这里将我学linux入门时学的一些经常使用的基本命令分享给大家一下,希望能够帮助你们. 这个是我将鸟哥书上的进行了一下整理的,希望不要涉及到版权问题. 1.显 ...