我的小屋
不論使用者怎麼縮放網頁，貓頭鷹都能正確的在右邊以滿版來顯示
一般有背景圖片的網站，會用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雲端硬碟
接著把他跳出來的那些授權什麼的都同意後，會進入到這個頁面
他會直接列出所有能夠變成靜態伺服器的資料夾
我雲端硬碟裡面只有一個資料夾裡面有「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圖片啦
