LV. 30
GP 5k

【密技】終於找到讓小屋背景圖,自動縮放的方法(新增完整教學)

樓主 深海異音 hbl917070
165 -

我的小屋
不論使用者怎麼縮放網頁,貓頭鷹都能正確的在右邊以滿版來顯示






一般有背景圖片的網站,會用2種CSS來讓背景圖片可以自動進行縮放

/*把背景圖片放大到填滿整個指定範圍,超過的部分會被切掉*/
body{background-size: cover;  }

或是

/*在指定的範圍內,把背景圖片放到最大*/
body{background-size: contain;  }


但巴哈姆特的小屋並沒有用最新的CSS語法,所以背景圖片不會自動縮放
舉例來說
我用一張寬度1600的圖片當成小屋背景圖
那麼其他人如果他的螢幕寬度不是1600,或是他網頁的顯示比例不是100%
那他看到的背景圖片就會跑版,因為他的網頁寬度不是1600




解決的辦法很簡單,只要背景圖片是SVG就行了
SVG是一種向量圖片,如果網頁沒有特別設定SVG的size
那麼瀏覽器就會自動把這個SVG的圖片放大到全滿
效力等同於 background-size: contain;

svg的語法如下
記得修改這3個地方
「圖片的原始寬度」、「圖片的原始高度」、「圖片的base64」

<?xml  version="1.0"  encoding="utf-8"?>
<svg  version="1.1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0  0  圖片的原始寬度  圖片的原始高度"  >
    
    <image  width="100%"  height="100%"
                  xlink:href="圖片的base64"
                  transform="matrix(1 0 0 1 0.5 0)">
    </image>
    
</svg>


我開發的 TiefSee 有內建把圖片轉成base64的功能
或是用線上的轉換器也行


用記事本輸入上面那坨svg的語法後,存檔即可
記得附檔名要是「svg」,例如檔名可以是「123.svg」



存檔完成後,測試用瀏覽器開啟這個svg,測試看看是否能夠正常開啟圖片
直接點著檔案,拖進google chrome瀏覽器裡面,就會開起來了





比較麻煩的是SVG不能丟到一般的圖片空間,必須使用支援靜態網頁的伺服器
一般常見的伺服器託管空間,對一般使用者來說可能太麻煩了
所以這邊用google雲端硬碟當示範


首先在谷歌雲端硬碟裡面新增一個資料夾,例如我取名叫做「imgs」



把剛剛的「123.svg」丟進去
然後在桌面新建一個叫做「index.html」的空白文字檔,也丟進去雲端硬碟裡面



把權限改成「網路上所有使用者均可以找到並且檢視」






這個是可以把google雲端硬碟變成靜態網頁伺服器的東東
https://www-drv.com/index.html

進去後選google雲端硬碟



接著把他跳出來的那些授權什麼的都同意後,會進入到這個頁面
他會直接列出所有能夠變成靜態伺服器的資料夾
我雲端硬碟裡面只有一個資料夾裡面有「index.html」,所以他就只列出一個網址




點進去後一片白白的就是成功了,因為剛剛上傳的「index.html」就是伺服器的「首頁」
但是我們沒有輸入任何東西進去,所以是網頁是一片白



在這個網址後面加上剛剛上傳的svg檔名,就會變成svg的圖片啦
例如我的檔名是「123.svg」
不過我建議先把他全選複製起來再按enter載入
因為載入圖片後,他的網址會改變,而且變得很長






巴哈要求圖片網址結尾必須是「.jpg」或「.png」或「.gif」
所以利用網址裡「#」,後面的東西不會送到伺服器的特性就能解決
在svg網址的結尾加入「#.jpg」
例如svg的網址是「https://yx1cbppabsavoczmuvkleg-on.drv.tw/imgs/123.svg」
那麼改成「https://yx1cbppabsavoczmuvkleg-on.drv.tw/imgs/123.svg#.jpg
就能夠在巴哈使用這張SVG了


最後就能快樂的在巴哈的小屋使用svg圖片啦



165
-
未登入的勇者,要加入討論嗎?
板務人員:

7593 筆精華,01/13 更新
一個月內新增 3
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】