div或img图⽚⾼度随宽度⾃适应的⽅法
该⽅法主要⽤来做⽹站⾃适应的，同时可以实现撑起内容⾼度，避免图⽚加载后导致的页⾯滚动。
⼀、可以使⽤js判断图⽚的宽度得到具体数值之后，再来利⽤js设置图⽚的⾼度（这⾥就不具体为⼤家细说了）。
利⽤js来实现有⼀个缺点就是只能在页⾯刷新的时候才能调整图⽚的⾼度，不能随着浏览器的窗⼝⼤⼩变化来实现⾃适应。⼆、我这次主要是⽤css来实现图⽚⾼度的⾃适应问题。
下⾯是所需要的代码
（这种⽅法是可以在图⽚上⽅垂直居中展⽰⽂字的，如果不需要可以选择最下⽅更简洁的代码）
<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;
}
1、这⾥主要为⼤家说明的就是padding-bottom这个属性，当它的值为百分⽐的时候，是按该元素的宽度来计算的。所以当设为100%的时候，其⾼度就等于⾃⾝的宽度，形成⼀个正⽅形。当然，这个数值可以根据实际情再进⾏调整。
2、其次要说明的就是我们引⽤的图⽚是通过绝对定位来布局的，这样才能使图⽚跟随其⽗元素的⼤⼩改变来实现⾃适应。另⼀种简洁的⽅法就是直接在img的⽗元素上加padding-bottom就⾏了
div中的div居中<div class="img-box">
<img src="123.jpg"/>
</div>
.img-box{
padding-bottom:100%;
}
.img-box img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
margin:auto;
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。