<!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. hdu 2016

    Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数.   Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这 ...

  2. Net线程池设计

    Net线程池设计 功能描述: 支持创建多个线程池,并统一管理 支持不同线程池的容量控制,以及最少活动线程的设置 支持不同线程池中活动线程的闲时设置,即线程空闲时间到期后即自动被回收 结构设计: Thr ...

  3. Spark link集合

    Part1. 各种参数的意义及如何配置 Spark官方文档——Spark Configuration(Spark配置) http://www.cnblogs.com/vincent-hv/p/3316 ...

  4. 【原创】基于部署映像服务和管理（DISM）修改映象解决WIN7 USB3.0安装时报错

    本文作者为博客园阿梓喵http://www.cnblogs.com/c4isr/,转载请注明作者. 本文源地址:http://www.cnblogs.com/c4isr/p/3532362.html ...

  5. Codeforces 519E A and B and Lecture Rooms

    http://codeforces.com/contest/519/problem/E 题意: 给出一棵树和m次询问,每次询问给出两个点,求出到这两个点距离相等的点的个数. 思路: lca...然后直 ...

  6. Linux企业级项目实践之网络爬虫（1）——项目概述及准备工作

    我们在学习了Linux系统编程之后,需要一些实战项目来提高自己的水平,本系列我们通过编写一个爬虫程序,将我们学习的知识进行综合应用,同时在实现项目的过程中逐渐养成一些有用的思维方式,并具有初步的软件开 ...

  7. linux网络配置相关文件

    网络接口(interface)是网络硬件设备在操作系统中的表示方法,比如网卡在Linux操作系统中用ethX,是由0开始的正整数,比如eth0.eth1...... ethX.而普通猫和ADSL的接口 ...

  8. Codeforce 218 div2

    D 一开始想错了,试图用"前缀和-容量"来求从上层流下来了多少水",但这是错的,因为溢出可能发生在中间. 然后发现对于每层,溢出事件只会发生一次,所以可以用类似并查集的办 ...

  9. 【转】打包AAC码流到FLV文件

    AAC编码后数据打包到FLV很简单.1. FLV音频Tag格式                              字节位置    意义0x08,                         ...

  10. QListWidget方式显示缩略图

    最近在工作中经常遇到了一个问题就是把把文件夹中的图片全部以缩略图的形式显示出来,刚开始的时候一头雾水,不知道怎么办,经过在网上查资料,发现QListWidget控件可以实现图片的缩略图显示,但是不知道 ...