纯js实现div内图片自适应大小-白红宇

纯js实现div内图片自适应大小

阅读量：4936 次

发布时间：2019-06-11

本文共 1501 字，大约阅读时间需要 5 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>By：DragonDean</title>

.sy_pic{ width:200px; height:200px; text-align:center;}

</style>

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>

</body>

</html>

转载于:https://www.cnblogs.com/dangzhenjiuhao/p/4824906.html

你可能感兴趣的文章

Android实现异步处理 -- HTTP请求

hdu--1258--Sum It Up（Map水过）

查看>>

Spring @DeclareParents 的扩展应用实例

查看>>

VS2012更新Update1后帮助查看器无法打开

查看>>

【Weiss】【第03章】练习3.9：大整数运算包

mysql优化——show processlist命令详解

查看>>

Solr服务器搭建

查看>>

画世界怎么用光影_世界绘画经典教程：水彩光影魔法教程

查看>>

win+rsync+php,跨平台的fswatch+rsync同步备份

查看>>

vue2 cdn 加载html,vue项目中使用CDN加载

查看>>