當要設計一個長寬等比例隨視窗大小縮放的 DOM 元素時，
可以使用最新的 CSS
屬性：
aspect-ratio
來達成，
例如現在想要放入一個 Youtube 的 iframe，
<iframe src="https://www.youtube.com/embed/Cu8NnGwYZp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
寬度要是外層元素的
80%，寬高比要是 16:9，
可以這樣設定：
HTML:
<iframe class="aspect-ratio" src="https://www.youtube.com/embed/Cu8NnGwYZp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
CSS:
.aspect-ratio {
aspect-ratio: 16 / 9;
width: 80%;
}
不過像在以前還沒有 aspect-ratio 的時代，
有一個蠻常用的、利用了 padding 的特性來實現的方法，
特別在這邊記錄一下。
首先先上 HTML 和 CSS：
HTML:
<div class="wrapper">
<div class="box">
<iframe class="box-in" src="https://www.youtube.com/embed/Cu8NnGwYZp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>
</div>
CSS:
.wrapper {
width: 80%;
}
.box {
width: 100%;
padding-top: 56.25%;
height: 0;
position: relative;
}
.box-in {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
接著把上述兩種方法放上在 JsFiddle 的成品來做為比較：
說明：
使用 padding 可以達成等比例 DOM 的原理是，
當元素的 height 是 0 ，並且沒有設定 border 和 margin 等時，
此時示素的高度就由它的 padding-top 或 padding-bottom 決定，
而 padding-top 此時會由它的父元素之寬來做為參考計算，
在上述的例子中，父示素就是 class="wrapper"，width 是 80%，在這裡也就是 <body> 寬的 80%，
而 class="box" 設定了 padding-top=56.25%，也就是 9/ 16，
這樣它的高度就會是父元素的寬乘上 9 / 16，然後它的寬會是父元素的寬。
在 class="box" 裡我們還要再設定一個 class="box-in" 元素，
因為 class="box" 有設定 padding-top 的關係，所以位置會被往下推，
要解決這個，我們可以先將 class="box" 設為 position=relative 做為子元素位置 left, top 的參考點，
然後在 class="box-in" 上設定
position=absolute
left = 0
top = 0
來將 class="box-in" 往上放至正確的位置，
接著在 class="box-in" 中就可以放上想要放的 Youtube iframe 了。
沒有留言 :
張貼留言