什么是固定宽高比容器？
定义：
无论浏览器窗口或页面元素如何变化，容器的宽度和高度永远保持固定的比例，如16:9。
应用场景：
如大屏自适应，内部元素对容器宽高比依赖很高的复杂模块布局等。
纯CSS实现固定宽高比的容器
原理：
- padding-top的值为百分比时，最终padding-top的计算值 = 百分比 * 当前元素宽度的计算值，从而通过padding-top将容器撑开。
- 为容器添加样式 box-sizing: border-box; 则容器的高度 = padding-top的计算值，从而实现容器高度根据容器的宽度按百分比自适应变化。
- 使用“子绝父相”，让容器中的内容完全覆盖容器。
cssRatioContainer.vue
<template> <div class="box" :style="ratioStyle"> <div class="content" :style="contentStyle"> <slot></slot> </div> </div> </template> <script> export default { props: { ratio: { type: Number, default: 1, }, overflow: { type: String, default: "auto", }, overflowX: { type: String, }, overflowY: { type: String, }, }, computed: { ratioStyle() { let ratio = (1 / this.ratio) * 100; if (ratio == null || Number.isNaN(ratio)) { ratio = 100; } if (typeof ratio !== "string" || !ratio.endsWith("%")) { ratio = ratio + "%"; } return `padding-top: ${ratio};`; }, contentStyle() { const styles = []; if (this.overflow) { styles.push("overflow:" + this.overflow); } if (this.overflowX) { styles.push("overflow-x:" + this.overflowX); } if (this.overflowY) { styles.push("overflow-y:" + this.overflowY); } return styles.join(";"); }, }, }; </script> <style scoped> .box { position: relative; box-sizing: border-box; } .content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } </style>
JS实现固定宽高比的容器
原理：
- 通过js获取容器的宽度计算值后，按宽高比计算出容器的高度，并赋值给容器。
jsRatioContainer.vue
<template> <div id="jsRatioContainerBox" class="box" :style="contentStyle"> <slot></slot> </div> </template> <script> export default { props: { ratio: { type: Number, default: 1, }, overflow: { type: String, default: "auto", }, overflowX: { type: String, }, overflowY: { type: String, }, }, data() { return { myHeight: "", }; }, computed: { contentStyle() { const styles = []; if (this.myHeight) { styles.push("height:" + this.myHeight); } if (this.overflow) { styles.push("overflow:" + this.overflow); } if (this.overflowX) { styles.push("overflow-x:" + this.overflowX); } if (this.overflowY) { styles.push("overflow-y:" + this.overflowY); } return styles.join(";"); }, }, mounted() { this.setHeight(); window.addEventListener("resize", () => { this.setHeight(); }); }, watch: { ratio() { this.setHeight(); }, }, methods: { // 根据宽高比和当前宽度，设置最终的高度 setHeight() { this.$nextTick(() => { let myDom = document.getElementById("jsRatioContainerBox"); let width = window.getComputedStyle(myDom)["width"]; this.myHeight = Number(width.replace("px", "")) * (1 / this.ratio) + "px"; }); }, }, }; </script> <style scoped> .box { width: 100%; } </style>
使用范例
<template> <div class="father"> <h2>CSS实现固定宽高比的容器</h2> <CssRatioContainer ref="CssRatioContainer" id="CssRatioContainer" :ratio="ratioWidth / ratioHeight" > <div class="itemBox" v-for="item in 100" :key="item">段落{{ item }}</div> </CssRatioContainer> <p>容器的宽度为：{{ mySize.width }}</p> <p>容器的高度为：{{ mySize.height }}</p> <label>容器的宽高比：</label> <input class="inputStyle" type="number" v-model="ratioWidth" @input="getSize" /> ： <input class="inputStyle" type="number" v-model="ratioHeight" @input="getSize" /> <h2>JS实现固定宽高比的容器</h2> <JsRatioContainer :ratio="ratioWidth / ratioHeight"> <div class="itemBox" v-for="item in 100" :key="item">段落{{ item }}</div> </JsRatioContainer> </div> </template> <script> import CssRatioContainer from "./cssRatioContainer.vue"; import JsRatioContainer from "./jsRatioContainer.vue"; export default { components: { CssRatioContainer, JsRatioContainer }, mounted() { this.getSize(); window.addEventListener("resize", () => { this.getSize(); }); }, methods: { getSize() { this.$nextTick(() => { let myDom = document.getElementById("CssRatioContainer"); let myComputedStyle = window.getComputedStyle(myDom); this.$set(this.mySize, "height", myComputedStyle.height); this.$set(this.mySize, "width", myComputedStyle.width); }); }, }, data() { return { mySize: {}, ratioWidth: 6, ratioHeight: 1, }; }, }; </script> <style scoped> .father { max-width: 1200px; margin: 20px; } .itemBox { background: red; border: 1px solid yellow; } .inputStyle { width: 60px; text-align: center; } </style>
