img 固定比例
2021年02月24日 | 分类: 常用组件 | 评论: 0 | 浏览: 1361
<div class="img">
<div class="conn" :style="{paddingTop:height}">
<div class="pos">
<img :src="src" :alt="alt">
</div>
</div>
</div>
<script>
return {
props:{
alt:{
default:''
},
src:{
default:''
},
height:{
default:'100%'
},
}
};
</script>.img{
width: 100%;font-size: 0;
.conn{
position:relative;z-index: 1;
}
.pos{
width:100%;height: 100%;position:absolute;left:0;top:0;z-index: 2;
text-align: center;
&:after{content: '';display: inline-block;vertical-align: middle;height: 100%;width:0;}
img{max-height: 100%;max-width: 100%;vertical-align: middle;}
}
}顶一下 ▲()
踩一下 ▼()
发表留言
登录后才能发表留言,立即 登录 或 注册
提交 (Ctrl+Enter)
