div自适应宽高保持比例不变
当屏幕宽度发生变化时我们通过百分比即可实现div的宽度自动变化,但是高度就比较麻烦了,很多时候我们都需要div自适应的时候能够保持宽高比例不变,这时就需要用到下面的方法。
一、设置一个能够自适应宽高得div。
div{ width: 50%; padding-bottom: 50%; height: 0; background: #222; }
解释:1、我们指定div的width为父级元素的一个固定百分比,以此自适应宽度。
2、设置高度为0,内边距为50%(内边距的计算以父级元素的宽高为基础),这样就有了一个正方形的div了,效果如下图灰白色的div。
二、div内部内容。
这个div的高度为0,那如果我要在element里放置元素呢,那岂不是没办法了,有办法,我们可以对内容进行相对定位。
div容器
div{ width: 50%; padding-bottom: 50%; height: 0; background: #222; position: relative; //设置定位点 }
div内容
div img { position: absolute; }
这样就可以正常显示了。并且成功的自适应保持宽高比例不变。