<!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. 响应式Asp.net MVC企业网站源码

    最近时间充裕,自己写了一个响应式MVC企业网站系统,用于回顾自己的MVC知识.网站源码后台和前台都采用响应式布局,可以适应不同的屏幕. 一.源码描述 响应式企业网站系统,前台和后台都采用了响应式布局, ...

  2. 需要熟悉的几个调试命令：objdump/pmap/ldd/stace

    最近要编译很多库,还涉及到若干进程操作,所以就把相关的命令记录下来. 一,objdump命令 该命令适用于ELF可执行文件,常用的命令如下: objdump -h xx.o : 输出ELF文件的各个段 ...

  3. 一个图片上传的servlet,传到本地磁盘，要传到服务器请修改

    本来想写个controller,结果拦截器把图片拦住了,那就直接servlet public class UploadEamge extends HttpServlet{ /** * */ priva ...

  4. “express不是内部或外部命令”解决办法

    由于安装的Express是最新版本4.13.1,4.x版本就需要安装express-generator.命令如下:npm install -g express-generator ps: 1.卸载: ...

  5. Codeforces 527D Clique Problem

    http://codeforces.com/problemset/problem/527/D 题意:给出一些点的xi和wi,当|xi−xj|≥wi+wj的时候,两点间存在一条边,找出一个最大的集合,集 ...

  6. QEventLoop 的使用两例

    熟悉的陌生人 Qt 是事件驱动的,所以当你用Qt的时候,几乎时时刻刻和 QEventLoop 打交道.,只是你可能没有意识到: QCoreApplicaton::exec() QApplication ...

  7. testNg官方文档

    官方文档:http://testng.org/doc/documentation-main.html

  8. ubuntu系统修改终端提示符及设置颜色高亮

    Linux终端大家想必都清楚吧,最近在使用的时候发现在进入到某个文件夹目录比较深的层次后,终端提示的绝对路径很长,这样给人的感觉很不习惯,在这里给大家介绍下如何修改终端的提示,顺便介绍下提示符的颜色: ...

  9. sqlite3 C接口

  10. The secret of ROWID

    表里每个数据行都有一个行头部,在这里存放了该行数据所包含的列的数量,以及锁定标记等.当某个事务更新某条记录时,会在该数据行的头部记录所用到的ITL槽号以及锁定标记.接下来则是列长度以及列的值.Orac ...