純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都用百分比%的範例:

父層
內層
body{
 margin:0;
}
#outer{
 background-color: #f60;
 padding:10px;
 width:100%;
 height:100vh;
}
#inside{
 background-color: #ff0;
 margin: 0 auto;
 width:80%;
 height:40%;
}

父層設定成跟視窗一樣大,目前看到的結果:
001-1
當視寬顯示比例改變之後,得到下面結果:
002-1
而這次想介紹的功能,希望父層的寬高比例改變之後,內層的寬高比例還是維持一樣,這個範例要採用的”相同單位”是vw,下面就是用vw為單位的範例,而且在寫的時候一定要width跟height都用vw才可以喔~
首先把內層的寬width跟高height單位改成vw

#inside{
  background-color: #ff0;
  width:80vw;
  height:40vw;
}

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *