只要圖片寬度設定超過280（指width="XXX"），手機模式的Blogger為了不讓圖片超出文章欄位，而自動縮成畫質較差的s280（Blogger的圖片網址）。文章欄位的寬度依據各台平板和手機的螢幕判定，因此沒有固定的寬度可參考。
若是不希望上傳到Blogger的圖片網址被硬改成s280。以下幾個方法提供參考：
1. 【主題>自訂按鈕右邊下拉箭頭>行動裝置設定】 選擇「電腦版」
優點：平板和手機顯示和電腦顯示一樣，圖片大小即使手動設定width和height，也不會被強制改變。
缺點：平板和手機的螢幕沒有電腦螢幕大的話，文字相對小，讀起來可能吃力，需要靠手指頻繁拉大閱讀。
2. 文章的圖片不設定width="XXX"
優點：Blogger內建的語法中的max-width: 100%（如下），可讓圖片頂多和文章欄位同寬，不會超出界線。
html .post-body img {
box-sizing: border-box;
max-width: 100%;
缺點：假使在文章內，有設定高度（height="XXX"），導致圖片的寬度超過手機螢幕的寬度，系統會自動判定圖片超出邊界，而強制限縮圖片的寬度等同螢幕寬度，使得顯示的圖片的長寬會不等比例，變得瘦長。
另外，因為螢幕寬度限制，大圖片無法如電腦版顯示並排。
3.
【主題＞自訂】選擇「進階」的「新增CSS」，加上行動裝置的寬和高的語法：
html .mobile .post-body img {
max-width:80%;
height: auto;
}
設定圖片寬度的百分比：max-width（建議設定在100%以下，不超過螢幕的邊界）
設定圖片高度為自動：auto
提醒：手動設定的寬度（width="XXX"）須不超過280；或者，沒有設定寬度，只設定高度。一旦手動設定的寬度超過280，圖片網址會強制改成s280，導致畫質變差。
優點：只有行動裝置的圖片會自動調整，配合螢幕寬度。即使在文章內手動設定高度（height="XXX"），圖片也會自動等比例調整大小，並且不超過螢幕邊界。
缺點：即使只設定高度，系統一判定圖片大小會超出螢幕邊界，會自動無視高度設定，限縮在容許的最高高度內。
此外， 因為螢幕寬度限制，大圖片無法如電腦版顯示並排。
4. 文章的圖片純設定width=XX%
優點：同一排的圖片的寬度的百分比加總不超過100%，會隨著螢幕大小變化，如電腦版顯示並排。例如：圖片A設定為width=30%，圖片B設定為width=40%，兩者相加僅佔了螢幕寬度的70%，不會溢出螢幕邊界。
缺點：沒法靠height=XX%將並排的圖片設定同高，只能手動調整width到圖片們的高度一樣。除非那些圖片的大小一致，不用花時間校對高度。
另外，並排的圖片的百分比愈小，也同樣顯示愈小；用平板和手機觀覽可能吃力。建議圖片加上其連結，點擊可直接看圖片原圖，但需要回到上一頁／上個視窗，才能繼續閱覽文章。
提醒：多設定height="XXX"，會導致圖片比例長寬不一。
【總結】
目前只有將行動裝置設定為電腦版，或是文章的圖片純設定為width=XX%，可維持圖片的並排效果。而Blogger的行動裝置的s280是內建語法，無法手動刪掉，只有電腦版不受影響。
沒有留言:
張貼留言