<!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. UIApplication详解再解-备

    每个app有且只有一个UIApplication对象,当程序启动的时候通过调用UIApplicationMain方法得到的.可以通过sharedApplication方法得到. UIApplicati ...

  2. 注册nodejs程序为windows服务

    转载地址:http://www.grati.org/?p=236 应lemonhall要求,写一篇在windows中部署nodejs程序的文章,并提供了how to node上 “deploying- ...

  3. PYTHON线程知识再研习E---条件变量同步Condition

    Python提供的Condition对象提供了对复杂线程同步问题的支持.Condition被称为条件变量,除了提供与Lock类似的 acquire和release方法外,还提供了wait和notify ...

  4. hdu4405：概率dp

    题意: 总共有n+1个格子:0-n 初始情况下在 0号格子 每次通过掷骰子确定前进的格子数 此外 还有一些传送门可以瞬间从 u 点传送到 v 点(必须被传送) 求走到(或超过)n点总共需要掷多少次骰子 ...

  5. Jsensation | 氪加

    Jsensation | 氪加 www.jsensation.com

  6. Vericant维立克 | 氪加

    Vericant维立克 | 氪加 Vericant维立克

  7. HTTP请求的TCP瓶颈分析

    这篇文章基本是对<Web性能权威指南>第一章和第二章的读书笔记,另外加一些扩展内容,这本书确实赞,推荐 针对三次握手.流量控制(接收窗口).慢启动(cwnd,拥塞窗口).队首阻塞等方面看下 ...

  8. java 自定义鼠标图标

    由于截图截不了,所以看不了图.源码如下: import java.awt.Cursor; import java.awt.Image; import java.awt.Point; import ja ...

  9. Mac OS X 下修改网卡地址和抵御 ARP 攻击

    用 Mac 系统有一段时间了,这里记录一下自己遇到的需要终端命令解决的问题. 网络环境绑定了原先机器的 MAC 地址,由于特殊原因,先把新机器的网卡地址改成原先那台. 在终端输入sudo ifconf ...

  10. Hive2.0函数大全(中文版)

    摘要 Hive内部提供了很多函数给开发者使用,包括数学函数,类型转换函数,条件函数,字符函数,聚合函数,表生成函数等等,这些函数都统称为内置函数. 目录 数学函数 集合函数 类型转换函数 日期函数 条 ...