项目背景:移动端加载图片,需要宽度充满屏幕,高度与屏幕宽度相等
解决办法:
代码如下
<div class='img-content'>
<img :src='图片地址'>
</div>
<style>
.img-content{
position: relative
width: 100%
height: 0
padding-top: 100%//保证图片高度和宽度相等的关键
}
.img-content img{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
}
</style>