我想根據視口的大小按比例調整 hmtl div 元素的大小。
該元素將被定位到一個動態大小的容器中，因此不能同時使用視口單位來表示元素的寬度和高度。
我正在嘗試盡可能在純 CSS/SASS 中執行此操作，我嘗試使用 aspect-ratio 屬性但無法使其作業
.element {
width: 80%; /*80% of container width*/
aspect-ratio: calc(100vw/100vh);
}
uj5u.com熱心網友回復：
沒有 JavaScript 就無法完成。
在你的情況下calc(100vw/100vh)是一個無效的表達。檔案在這里。
使用 JavaScript：
const updateRatios = () => {
;[...document.querySelectorAll(".viewport-ratio")].forEach((el) => {
const { innerHeight, innerWidth } = window
el.style.aspectRatio = innerWidth / innerHeight
})
}
updateRatios()
window.addEventListener("resize", updateRatios).viewport-ratio {
width: 50%;
border: 1px solid red;
}<div class="viewport-ratio"></div>- 如果不明顯，CSS 不是解決方案的一部分，它只是為了使解決方案可見而無需檢查。
- 腳本運行后添加到 DOM 的任何元素在再次運行（或調整視窗大小）
.viewport-ratio之前不會具有該比率。updateRatios
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525147.html
下一篇：影片在第二次運行時中斷