iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

ASP.NET (Web Form)快速入門,全程Youtube影片教學系列 第 24

HTML5的picture標籤 - 自動調整圖片大小

  • 分享至 

  • xImage
  •  

上一篇文章提到 RWD / BootStrap(http://ithelp.ithome.com.tw/articles/10187807 )
可以依照使用者的畫面解析度,自動調整版面、圖片大小....等等

其實 HTML5也有類似的功能, picture標籤

假設我有大中小,三張圖片。
依照使用者畫面的尺寸(寬度),我可以決定呈現哪一張圖片。

我們來看看今天的 Youtube教學影片吧 -- https://youtu.be/-SiUTX4fsY4
Yes

這是 HTML5提供的新元素(標籤)
所以不需要在網頁表頭,掛載許多 .js或是 .css檔案

        <picture>         
            <source srcset="\Images_Book\45_Book_big.jpg" media="(min-width: 1024px)">
            <source srcset="\Images_Book\45_Book_middle.jpg" media="(min-width: 750px)">
            <source srcset="\Images_Book\45_Book_small.jpg" media="(min-width: 300px)">
 
            <img src="\Images_Book\45_Book_big.jpg" alt="預設的圖片">
        </picture>

如果對方的瀏覽器,無法辨識(解譯)這樣的效果
就會使用傳統HTML的 img標籤來做

關於本文範例,請看 dotblogs.com.tw/mis2000lab/2014/12/04/html5_picture_rwd_image

時間過得很快,三十天的鐵人賽快結束了,還有很多東西想分享
只能做些取捨,請看下一篇文章:http://ithelp.ithome.com.tw/articles/10188033


上一篇
RWD 與 ASP.NET (Web Form),採用Bootstrap
下一篇
狀態管理 與 會員登入,兼論SQL Injection攻擊
系列文
ASP.NET (Web Form)快速入門,全程Youtube影片教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言