如何用JS来控制div高度的自适应

JavaScript011

如何用JS来控制div高度的自适应,第1张

首先你得有个高宽比（比例），根据这个比，用js计算就是了。

function resizeHeight(id,size){

var ele = document.getElementById(id)

var width = ele.offsetWidth

ele.style.height = size*width+"px"

}

说明：id是div的id(String)，size是高宽比(Number)。

调用：

resizeHeight("youId",0.5)

window.onresize = resizeHeight("youId",0.5)

方法一、

css实现：（此例中图片宽高比例为1:1）

<mt-swipe :auto="4000" style='height: 0padding-bottom: 100%width: 100%'>

        <mt-swipe-item style="height: 0padding-bottom: 100%width: 100%" v-for="item in list" :key="item.id">

            <img :src="item.img" class="swipepic">

        </mt-swipe-item>

      </mt-swipe>   

就是通过padding-top或者padding-bottom实现，高度设置为0。这个属性当它的值为百分比的时候，是按该元素的宽度来计算的。也就是说当设为100%的时候，其高度就等于自身的宽度，形成一个正方形。也就是说可以通过这个来设置已知尺寸比例的图片宽度100%高度自适应。

方法二、

使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度，具体实现请打开百度，另外请注意：用js实现的时候需要监控页面缩放变化以达到自适应。

javascript screen对象获取屏幕宽高如alert(screen.height)

availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素

availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素

colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)

pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)

height 属性 -- 屏幕的高度，单位像素

width 属性 -- 屏幕的宽度，单位像素

div设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位。