[awei研究室]圖片隨視窗自由縮放_CSS語法

2016.05.26 / 分類: awei研究室, JQUERY &CSS特效 / 0 則回應

可隨螢幕自動縮放的圖片
可以利用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區隔

css_zoom_t1