切換
舊版
前往
大廳
主題

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

深海異音 | 2019-04-17 05:18:38 | 巴幣 5188 | 人氣 2927


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






一般有背景圖片的網站,會用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圖片啦



送禮物贊助創作者 !
0
留言

創作回應

(๑˘• ¸•)˘〈影ヨ⁆
經由 drv.tw 轉換的連結,今天首次出現「你的連線不是私人連線」……
可還是能看到範例的貓頭鷹呀;我這邊的竟然反而變這樣,這有哪個可能造成呀?
共用設定也是完全相同呢……
2019-06-15 19:54:40
深海異音
我用的是 github的伺服器
我猜是google雲端硬如果流量太高就會封鎖
我自己也沒有試過高負荷的連線,所以不確定
2019-06-15 20:38:56
(๑˘• ¸•)˘〈影ヨ⁆
對喔!難怪它是「時不時地變」那樣──

這跟之前經驗過「想下載他人提供且熱門的G雲端連結,卻說流量問題而被迫不能出現下載鈕」的類似。
2019-06-15 20:45:42
(๑˘• ¸•)˘〈影ヨ⁆
[e8] 發現可能跟我取的檔名有關……改成「沒有括弧或%20」就沒問題了的樣子。 ww
2019-06-15 23:11:42
深海異音
的確有這個現象,有些伺服器不支援在網址裡面輸入特殊符號,所以會轉換成%20 %21 %22 之類的
http://www.w3school.com.cn/tags/html_ref_urlencode.html
2019-06-15 23:21:43
我只是路過的蘿莉控
剛剛試了一下,google drive的資料夾共用只要開「知道連結的使用者」就行了
2019-08-20 04:49:02
Ctrl+Shift+W
教學簡明易瞭,感謝
另外 Google Drive 那部分,提供一個簡化的做法:
1. 取得連結(同時權限也要打開),會得到這種格式的網址
https://drive.google.com/file/d/<ID>/view?usp=sharing

2. 把上面那串中的 <ID> 複製下來(實際上很長,他是這個檔案的 ID)

3. 把複製的 ID 加到這個格式的網址:
https://drive.google.com/uc?export=download&id=<ID>

4. 再把網址尾綴 #.jpg 就可以了。


這個方法在各種網頁內嵌圖都可以用,在絕大部分瀏覽器中均能正常運作。
(曾經被 Safari 使用者抱怨圖出不來,不過似乎不是每個用 Safari 的人都開不了)
唯獨要注意的是,用這種格式的連結,從網址輸入後不會預覽而是直接下載檔案。
2020-10-01 19:12:11

更多創作