<template>
<div class="AspectRatio" :style="`padding-top: ${ratio[1] / ratio[0] * 100}%`">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
/**
* @param {Array} ratio = [1, 1] 宽高比
*/
export default {
name: "AspectRatio",
props: {
// 宽高比
ratio: {
type: Array,
// [宽, 高]
default: [1, 1],
},
},
};
</script>
<style scope>
.AspectRatio {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
