---
tags: rwd
---
# 6. 響應式圖片
## 響應式圖片設計
* width:100% 依附元素做延展，圖片可能會變模糊 (範例父元素是body)，通常是滿版會用到

* max-width:100% 以圖片原始尺寸為最大範圍 (例如圖片原始寬為800px 最大不會超過)，實務上較常使用

img{
width:100%;
}

img{
max-width:100%;
}

## 響應式圖片設計reset

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

## 圖片SIZE規劃，刻意設計較大張一點的技巧

.news img{with: 100%;}
範例圖片原大小為300x200px在手機與平版會強制放大而模糊，
pc 三欄: img為300x200px 圖片剛好
pad兩欄: img拉到360x240px 圖變模糊
iphone單欄: img拉到522x348px 圖變模糊

**在規劃時應該把圖片改大張一點，調到600x400px，這樣到手機版也不會糊掉**

## logo取代為SVG格式
* bg-image設定png與svg，若瀏覽器舊版不支援svg可連到png
* background-size 會自適應在設定的大小內(範例w128 h128)
* 圖片取代文字技巧Text-indent、overflow、white-space
把logo圖片設定取代文字，文字給搜尋引擎搜尋用

>text-indent:101% ; 是 CSS 語法的縮排或凸排的語法，概念就跟 Word 的首字凸排或縮排一樣。

>overflow: hidden; 當元素超出範圍時，元素就隱藏

>white-space: nowrap; 因為文字到達元素最大範圍時，通常會自動換行，但是這邊設置強制不讓他換行。也因此這三個屬性才能夠達到隱藏文字效果

## Banner 設計 - 背景擷取
* 背景圖片置中，不設定寬度，左右兩邊用背景色來延展
background-position: center center;

* 在600px時連到另一張圖，範例圖片focus在漢堡的地方



(圖片內容來源為六角學院)