CSS width與min-width與max-width

Posted on Edited on In Views: Disqus:

 

一、CSS中的width

CSS中的width屬性是用來設定一個元素的寬度，

其值可為auto(預設值，browser將會自動計算寬度)、px、%，

另外值得注意的是，CSS中的min-width與max-width屬性是可以與width屬性作用同時存在的，

將會在第二點做舉例。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <img src="http://www.w3schools.com/css/img_chania.jpg" width="460px" height="345px">
    <p>Resize the browser window to see how the image wil scale when the width is less than 460px.</p>

</body>
</html>

如上例，width屬性為100%代表元素的寬度會等於browser視窗的寬度(父層皆無padding與margin)，

正確來說應該是width屬性為100%代表元素的寬度會等於父層的寬度。

CSS的width屬性為100%代表元素的寬度將會覆寫原本img tag內的html width="460px"屬性

 

額外一提，width:100%與margin屬性一起設定的話是不會互相影響是不相干的，

可能有人會認為如果margin屬性再加上去，

則寬度會自動包含margin調整成browser視窗的寬度，

img {
    width: 100%;
    height: auto;
    margin: 0 20%;
}

但實際上是錯的，例如未加margin: 0 20%前，width: 100%等於browser視窗的寬度為400px，

加上margin後則整個父層的寬度會是400px再加上左右20%的margin為400+400*0.2*2=560px，

並會出現X卷軸喔。

 

二、max-width

承上例，我們藉由使用max-width來讓圖片縮放的比例較好看一點

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <img src="http://www.w3schools.com/css/img_chania.jpg" width="460" height="345">
    <p>Resize the browser window to see how the image wil scale when the width is less than 460px.</p>

</body>
</html>

設置max-width屬性為100%的意思是，圖片的寬度可以依browser視窗寬度等比例的縮小，但是放大時，

最多只能放大到圖片所設定大小，與browser視窗寬度100%寬度而已。

例如：

max-width設定成80%，html width屬性為460，圖片最多只能放大到460，與browser視窗寬度的80%而已。

 

三、保持長寬比(aspect ratio)

有時為了美觀，也要有保持適當的長寬比技術，範例如下。

 

1、長寬比為1 : 1

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background-color: red;
            width: 100%;
            padding-top: 100%; /* 1:1 Aspect Ratio */
        }
    </style>
</head>
<body>

    <h2>Maintain Aspect Ratio 1:1</h2>
    <p>Resize the window to see the effect.</p>

    <div class="container">

    </div>

</body>
</html>

 

2、長寬比為1 : 2

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background-color: red;
            width: 100%;
            padding-top: 50%; /* 1:2 Aspect Ratio */
        }
    </style>
</head>
<body>

    <h2>Maintain Aspect Ratio 1:2</h2>
    <p>Resize the window to see the effect.</p>

    <div class="container">

    </div>

</body>
</html>

 

由以上範例可知，主要是固定設定「width:100%」與動態設定「padding-top」屬性，來保持長寬比，

例如做長寬比1 : 1時，則padding-top要往下推100%；做長寬比1 : 2時(也就是長寬比為0.5 : 1時)，則padding-top只要往下推50%。

那為何這樣就可以達到保時長寬比？我也不曉得，這還蠻不直覺的。

 

3、長寬比為 100 : 56.25

為什麼要用padding-top屬性就可以達到保時長寬比？我想應該是div tag的關係吧，

因為div tag是塊級元素，並沒有特定的高？

現在這個例子是iframe tag是個行內元素

<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            background-color: red;
            width: 100%;
            padding-top: 56.25%;
        }
    </style>
</head>
<body>
    <h2>Maintain Aspect Ratio 100:56.25</h2>
    <p>Resize the window to see the effect.</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/X0QzdblXcR0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

畫面為

你會發現真的有往下推56.25%，但你的iframe卻是在56.25%之後，這樣很怪耶。

 

改法如下，這樣就比較直覺了。

<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            background-color: red;
            width: 100vw;
            height: 56.25vw;
        }
    </style>
</head>
<body>
    <h2>Maintain Aspect Ratio 100:56.25</h2>
    <p>Resize the window to see the effect.</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/X0QzdblXcR0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

畫面為