純css控制div, iframe物件(youtube, google map…)長寬比, RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD

iframe物件通常會在html裡直接設定尺寸,但製作RWD網頁時都是在css裡根據不同media制定Media Queries 媒體查詢,因此大家常常會用jQuery的方式直接計算寬高比,只是這個方法會讓網頁載入的時間延遲一點點,這一篇就介紹如何只用CSS來控制iframe物件的寬高比。

title

要讓物件等比例的話必須要設定物件的寬width跟高height都是用相同的單位才行,在過去的css版本(css3之前)可以做為相對寬高的單位只有百分比%,但如果在物件的寬width跟高height都用百分比%的方式設定,那它也只會各別以父層的寬跟高來計算百分比。

來看看寬width跟高height都用百分比%的範例:

父層設定成跟視窗一樣大,目前看到的結果:

001-1

當視寬顯示比例改變之後,得到下面結果:

002-1

而這次想介紹的功能,希望父層的寬高比例改變之後,內層的寬高比例還是維持一樣,這個範例要採用的"相同單位"是vw,下面就是用vw為單位的範例,而且在寫的時候一定要width跟height都用vw才可以喔~

首先把內層的寬width跟高height單位改成vw

003-1

當視窗改變比例的時候,內層還是可以維持一樣的長寬比例

004-1

Leave a Reply