Flex Media

在某次專案過程中,為了讓影片以及圖片等多媒體檔案能夠在 RWD 的要求下能夠保持一定比例,因此寫了這個組件出來,因此我把它整理之後納入到了 Lazy 3。

預設樣式

這個組件其實只有一個 <div class="flex-media">,只要將影片、圖片或是 Youtube 的 ifrmae 放置進去即可,預設比例為 16:9。載入影片可使用 iframe , video , object 或是 embed

<div class="flex-media">
    <iframe src="https://www.youtube.com/embed/KbNGklNz8Yk"></iframe>
</div>

圖片

圖片的使用會較為不同,必須使用 background-image: url("path/img") 的方式呈現圖片。可以使用一個 <span> 加上 .flex-media-img,並將圖片連結寫在 style 屬性內。

<div class="flex-media">
    <span class="flex-media-img" style="background-image: url(img/demo2.jpg)"></span>
</div>

比例

在 Flex Media 上提供了幾種比例,包含預設的 16:9, 1:1, 4:3, 3:2,同時也提供直式的比例,包含 9:16, 3:4, 2:3。選擇不同比例時,可在 .flex-media 加上 .flex-[w]-[h],如果是使用 4:3 時,Class 就是 .flex-4-3。另外,有一點要注意的是,CSS 並沒有辦法偵測照片的重點區域,因此選擇比例時要注意本身照片的比例是否接近,否則可能顯示出來的效果會將重點區域切除。

<div class="flex-media flex-1-1">~略~</div>
<div class="flex-media flex-4-3">~略~</div>
<div class="flex-media flex-3-2">~略~</div>
<div class="flex-media flex-9-16">~略~</div>
<div class="flex-media flex-3-4">~略~</div>
<div class="flex-media flex-2-3">~略~</div>
<div class="flex-media flex-5-2">~略~</div>

遮罩

在 Flex Media 上增加遮罩時,可在 .flex-media 上增加 .flex-media-mask

<div class="flex-media flex-media-mask">
    <iframe src="~略~"></iframe>
</div>

如果想新增一個透明的遮罩,可採用另一種方式:新增一個 div.mask-opacity

<div class="flex-media flex-media-mask">
    <div class="mask-opacity"></div>
    <iframe src="~略~"></iframe>
</div>