img 固定比例

2021年02月24日 | 分类: 常用组件 | 评论: 0 | 浏览: 590
<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)
Copyright 2020-2022 xaoi博客 All Rights Reserved.