不同大小的顯示裝置自動顯示RWD圖片

不同大小的顯示裝置自動顯示RWD圖片

在網站中的圖片通常是一種尺寸,但因為現在手機瀏覽網站的人都比桌機還多
所以一張圖片你可能會需要上傳兩種尺寸,尺寸小的給手機看,尺寸大的給桌機看
這樣手機瀏覽起來速度也比較快,只是缺點是一張圖片會有兩個檔案

使用的語法也很簡單,如下:

<img src="photo-1024.jpg" srcset="photo-600.jpg 600w, photo-1024.jpg 1500w"/>

裝置螢幕寬度在600px以內的話顯示photo-600.jpg

裝置螢幕寬度在1500px以內的話顯示photo-1024.jpg

不同大小的顯示裝置自動顯示RWD圖片
不同大小的顯示裝置自動顯示RWD圖片
關於作者 多力哥
不同大小的顯示裝置自動顯示RWD圖片
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
景文科大畢業後,我成為一名網站動畫設計師,並副修MIS電腦資訊管理。2004年,我開始接觸單眼相機,並在2008年正式成為一名接案攝影師,目前使用Canon系統進行拍攝。2016年,我愛上了美麗的水草缸,這讓我的生活多了另一層次的放鬆。每天在電腦前修圖時,能欣賞紅吱吱、綠油油的水草,彷彿多了一份平靜與愉悅。攝影與水草讓我的生活充滿了藝術與自然的交融。
連絡信箱:hello@hahasmile.com (歡迎合作提案)
DORIGO IMAGE 攝影工作室:https://dorigo-image.com
如果你喜歡我的內容,可以用行動贊助我一杯咖啡☕,支持我持續創作,也讓這個網站可以繼續營運下去喔!

若您喜歡這篇文章,歡迎按讚分享喔!
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *