需要用到的模組
Breakpoints
Image Style
Picture mappings

步驟一、新增圖片樣式

到Image style裡面選擇Add image style來新增接下來需要使用到的圖片樣式樣式名稱個人習慣是依照使用的地方跟尺寸來做為命名

例如：這次使用的地方是slideshow圖片的尺寸是1920*240，我就會用 slideshow 1920x240 來當做樣式名稱

步驟二、選擇要使用的效果

新增 Manual Crop: Crop and scale

決定好要更換圖片的斷點之後進到Breakpoints裡面 > 選擇Add a new group來創建一新的群組然後把我們需要使用到的斷點給打勾！

進到Breakpoints裡面 > 選擇Add responsive style

圖像樣式選擇剛才步驟一的時候新增的樣式名稱

imge style base name的命名會是選擇的圖像樣式的機器名稱當開頭加上我們輸入的東西和選擇的尺寸作為後墜。

所以只要輸入_的話就會變成slideshow_acustom_user_pc_1x

樣式都生成好了之後就要像步驟二的時候一樣一個個進去裡面調整想要的縮放尺寸！

到Picture mappings裡面，選擇新增下拉選單選擇在步驟三的時候建立好的斷點名稱

下面就可以照著我們希望的尺寸來做套用的圖片樣式調整

類型選擇Use image styles 圖像樣式選擇在步驟四的時候建立好的一系列樣式！這個地方處理的是在設定好的尺寸下我要使用哪個樣式

上面步驟的設定都完成後，我們就已經完成全部的基本配置啦！

接下來到Structure(架構)裡的Entity types中找到要設置的type 在管理欄位中會出現剛才設定的那幾個尺寸中對應的欄位依序進入這些欄位進行編輯，往下滾找到

點開後把 Upload(default)、Advanced upload widget(Plupload)、Remote URL textfield 這三個選項打勾

下面的Styles list選擇圖片上傳後的圖片樣式設定

這裡就能看到所有由Breakpoints設定好的斷點點開選單就能發現裡面的選項都是剛剛在管理顯示上能看到的項目接著針對需要的斷點選擇要顯示的欄位就完成的差不多了！

同樣的type中，這次進入管理顯示欄位上只留下Normal的欄位、齒輪點進去的設定 Picture mapping => 選擇步驟五設定的東西到這裡就全部完成囉！

接下來只要在內容裡面新增想要看到的圖片就可以看到結果啦！有任何疑問的話歡迎在下方留言告訴我們哦！