div或img图片高度随宽度自适应

1.实现思路

方式一：

使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度[不再细说]，利用js来实现有一个缺点是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。

方式二：

使用css来实现图片高度的自适应

这里使用方式二，code如下：

<div class="box">
    <span>行内元素垂直居中</span>
    <div class="img-box">
        <img src="123.jpg"/>
        </div>
</div>

.box{
    width: 50%;
    margin: 50px auto;
}
.img-box{
    width: 100%;
    position:relative;
    z-index:1;
}
.img-box img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    margin:auto;
    z-index: -1;
    *zoom:1;
}
.img-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: 0.1px;    /*必须要有数值，否则无法把高度撑起来*/
    vertical-align: middle;
}