上传的图片自动适应DIV容器大小，js怎么做

img {max-width: 800px; height: auto;} 代码中的max-width:800px限制的最大宽度为800像素，而下面的hight:auto很关键，可以保证有正确的长宽比，不至于因为被调整宽度而变形。 img {width:100%;height: auto;}这种css是自适应

给img添加加载事件，图像加载完成才能获取的尺寸。

html中添加onload

function showSize(img){

alert(imgwidth);

alert(imgheight);

}

<div style="width:100px;height:600px"><img src="1jpg" onload="showSize(this)"></div>

或者js代码中添加onload

let img=documentquerySelector("div img");

imgonload = function() {

alert(imgheight);

alert(imgwidth);

}

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

1介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。

3浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。

4页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。

HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。

如：一个22寸的显示器，屏幕分辨率为1366 768，那么获取到的屏幕高度为1366px，宽度为768px。

screenheight ： 屏幕高度。

screenwidth ： 屏幕宽度。

screenavailHeight ： 屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

screenavailWidth ： 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ： 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screenheight - screenavailHeight 。

windowouterHeight ： 浏览器高度。

windowouterWidth ： 浏览器宽度。

windowinnerHeight ： 浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

windowinnerWidth ： 浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 ： 包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：windowouterHeight - windowinnerHeight。

bodyoffsetHeight ： body总高度。

bodyoffsetWidth ： body总宽度。

bodyclientHeight ： body展示的高度；表示body在浏览器内显示的区域高度。

bodyclientWidth ： body展示的宽度；表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 ： 如高度，可通过浏览器内页面可用高度 - body展示高度得出，即windowinnerHeight - bodyclientHeight。

如何获取的原始尺寸大小？

如下，当给 img 设置一个固定的大小时，要怎样获取的原始尺寸呢？

#oImg{

width: 100px;

height: 100px;

}

<img src="images/testjpg" id="oImg" alt="">

方法一：

HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。

w = documentgetElementsByTagName("img")[0]naturalWidth;

h = documentgetElementsByTagName("img")[0]naturalHeight;

consolelog(w + '  ' + h);

打印出来的结果与原始尺寸相符。但有个前提是，必须在完全下载到客户端浏览器才能判断。

如果是不支持的版本浏览器，那可以用传统方法判断，如下：

var img = documentgetElementById("oImg"),

w,h;if (oImgnaturalWidth) {// HTML5 browsersw = oImgnaturalWidth;

h = oImgnaturalHeight;

} else {// IE 6/7/8var nImg = new Image();//      nImgsrc = oImgsrc;nImgonload = function () {

w = nImgwidth;

h = nImgheight;

consolelog(w + "  " + h)

}

nImgsrc = oImgsrc;}

此时为什么要加 onload 的原因是，可能没加载完成，导致的 width 、height 无法获取到。

这里还有有个点要注意， nImgsrc = oImgsrc 这段代码为什么要放在 nImgonload 函数后面？ 这样做是为了兼容 ie 。ie 除了第一次加载时候获取正常，之后再刷新就没有反应了。其他大部分浏览器获取正常。这是什么原因呢？

原因也挺简单的，就是因为浏览器的缓存了。当加载过一次以后，如果再有对该的请求时，由于浏览器已经缓存住这张了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于大部分浏览器，它们视图使这两种加载方式对用户透明，同样会引起的onload事件，而 ie 则忽略了这种同一性，不会引起的onload事件。。。一般情况下，可以用 complete 来判断是否加载完毕。对于 complete 属性来讲，IE是根据是否显示过来判断，就是说当加载的显示出来后，complete 属性的值才为true ，否则一直是false ，和以前是否加载过该张没有关系，即和缓存没有关系！可以写如下的函数来做到各个浏览器中预加载的兼容性。如下：

var img = documentgetElementById("oImg"),

w,h;if (oImgnaturalWidth) {

// HTML5 browsersw = oImgnaturalWidth;

h = oImgnaturalHeight;

} else {

// IE 6/7/8var nImg = new Image();

nImgsrc = oImgsrc;

if(nImgcomplete) { // 已经存在于浏览器缓存consolelog(nImgwidth + "  " + nImgheight);

}else{

nImgonload = function () {

w = nImgwidth;

h = nImgheight;

consolelog(w + "  " + h);

}

}

}

最后封装成函数，如下：

function getImgNaturalDimensions(oImg, callback) {var nWidth, nHeight;

if (!oImgnaturalWidth) { // 现代浏览器nWidth = oImgnaturalWidth;

nHeight = oImgnaturalHeight;

callback({w: nWidth, h:nHeight});

} else { // IE6/7/8var nImg = new Image();

       nImgonload = function() {             var nWidth = nImgwidth,

                nHeight = nImgheight;

          callback({w: nWidth, h:nHeight});

}

nImgsrc = oImgsrc;

}

}

var img = documentgetElementById("oImg");getImgNaturalDimensions(img, function(dimensions){

consolelog(dimensionsw);

});

方法二：（不需要再页面中展示）

将 img 放在页面中不可见的位置上，缺点是：这种方法需要浏览器加载这张

imgbox{// img 盒子width: 0;

overflow: hidden;

}

然后在去取宽高等信息：

function getImgNaturalDimensions2(oImg) {var nWidth, nHeight;if (!oImgnaturalWidth) { // 现代浏览器nWidth = oImgnaturalWidth;

nHeight = oImgnaturalHeight;return ({w: nWidth, h:nHeight});

} else { // IE6/7/8nWidth = oImgwidth;

nHeight = oImgheight;return ({w: nWidth, h:nHeight});

}

}var getImg = getImgNaturalDimensions2(img);

consolelog(getImg)

然而，到这里，是不是万事大吉了呢？答案当然是否定的。

你用这种方法做后，会发现你有时可以取得 img 的 width、height ，但有时会是个 0。原因见下节分析。

我们先看如何正常去取吧！

var img = documentgetElementById("oImg");

imgonload = function(){    //方法一    getImgNaturalDimensions(img, function(dimensions){

consolelog(dimensionsw);

});    //方法二

var getImg = getImgNaturalDimensions2(img);

consolelog(getImg);

}

只需在 imgonload 函数内去调用函数。

以上就是关于上传的图片自动适应DIV容器大小，js怎么做全部的内容，包括:上传的图片自动适应DIV容器大小，js怎么做、js如何获取图片显示时的大小尺寸、HTML 获取屏幕、浏览器、页面的高度宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！