單一圖片響應式配置

RWD 系列文章 》

響應式設計-簡易圖片處理這篇文章裏面,說明以不同圖片動態呈現以達到響應試設計的巧,而除了根據螢幕尺寸配置數張不同尺寸圖片的作法,你也可以選擇以單一圖片根據螢幕大小縮放來達到響應式設計的效果,採用此種作法要注意的是,為了避免放大後失真,圖片原尺寸的解析度必須以最大圖片為基準,並且設定以下的樣式:

img{
max-width:100% ;
height:auto;
}

其中將以螢幕寬度動態縮放至合的寬度,並且自動依據圖片比例調整高度。以下的網頁配置了一張大小為 1600✕640 的圖片,並設定所需的樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
    <title>康廷明信片</title>
    <style>
        body
        {
            margin:0px;
            padding:0px;
        }
        img
        {
            max-width: 100%;
            height: auto;
        }
        div
        {
            text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <img src="img/mon1.jpg" />
    </div>
</body>
</html>

現在以寬度 1680px 的螢幕瀏覽網頁,得到下的結果畫面:



由於其中的 img 樣式設定為 max-width: 100% ,因此圖片一旦超過 1600px 寬度即以 1600px 呈現,現在重新縮減螢幕寬度,呈現效果如下:



一旦螢幕寬度小於 1600px ,圖片寬度即會自動縮小以符合螢幕寬度。

RWD 系列文章 》


6 則留言:

白昱祥 提到...

請教一下,圖片能置中是因為
body 的 margin:0px; 與 padding:0px;
的關係

還是因為 div 的 text-align:center; 呢?

(印象中 text-align 只能對文字有效)


分享一下我平常使用置中的方法:

display: block;
margin: auto;
height: 100%;
width: 100%;

康廷數位文教網 提到...

text-align 置中即可
margin: auto; 是常見的作法
body 的 margin:0px; 與 padding:0px 是重設樣式配式,這樣圖片才能緊黏邊界上

XD

白昱祥 提到...

謝謝指教!!!又學了一課~

只是滿驚訝 text-align 可以讓圖片元素置中 XD

那麼是不是所有子元素都可以因為 text-align 的效果而置中呢?

康廷數位文教網 提到...

不行也,最通用的是將元素配置為:

margin: 0 auto;
width:固定寬度;

就能全部置中了,最好的作法是參考這系列寫的:

http://www.kangting.tw/2013/10/css3-displayflex.html

這是規格書中未來最標準的作法,不過目前支援度還不是很夠就是了,但可以先學起來 :D


白昱祥 提到...

嗯嗯!! 我知道使用 margin: 0 auto;
要搭配 width: 固定寬度; 否則會沒效果

這裡的固定寬度應該也可以用 % 吧?
( 我慣用 % ,不喜歡用數值寫死 :P )


謝謝 flex 分享教學!!~很受用

康廷數位文教網 提到...

是的,就是一定要設定 ~~ XD

Good Luck