2018-03-20
css-圖片隨視窗自由縮放.txt
ref:
http://aweidesign.why3s.tw/wp/1338/awei研究室圖片隨視窗自由縮放_css語法
可隨螢幕自動縮放的圖片
可以利用JavaScript 程式來判定視窗控制圖片的大小.
其實直接使用CSS語法就能簡單辦到~~
要做一個適應性設計 (Responsive Web Design)，簡稱 RWD的網頁，圖片文字都要隨著使用者的使用介面來做出適當的反應，瀏覽網站時不需要縮放、水平捲動的操作，用單指就可以輕鬆瀏覽。
建議直接使用CSS屬性來排版
1.使用 img 標籤
img
{
height: auto;
max-width: 100%;
}
優點是非常簡單使用且適用於整頁圖片均可自動縮放
缺點則是解析度無法針對不同解析度指定圖片
要設定原比例縮放的 img 很容易，只需要width 、 height 兩個屬性，其中一個數值（通常是 width ）設定百分比來作為縮放依據,使用
max-width
替代
width
可以更完美的處理當瀏覽器視窗小於元素寬度的情況.
2.多圖片並排時可運用float語法與padding做出分隔
#spic
{
line-height:10px;
padding:5px;
float:left;
}
注:
(float: left;)浮動排列可以很輕鬆的讓每個DIV區塊做巢狀排列,如果沒用這語法的話,每個區塊會直行往下排成一列
(padding)在內容外，邊框內的部分,可以簡單做出每個DIV區隔
範例
無標題文件
