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

1.应用场景

主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。

2.学习/操作

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;
}

 

3.问题

TBD

4.参考

https://blog.csdn.net/zh_rey/article/details/69666232

后续补充...