責任網站的圖片尺寸網站

如何在所有設備上爲多個屏幕尺寸選擇圖片尺寸以承擔責任？責任網站的圖片尺寸網站

2015-03-02 Aram Aramyan

你應該閱讀[這]（http://alistapart.com/article/responsive-web-design） – 2015-03-02 08:47:04

PictureFill是一個很好的響應式圖像填充。

使用起來非常簡單。就在下面一行添加到您的網站的<head>：

<script> 
    // Picture element HTML5 shiv 
    document.createElement("picture"); 
</script> 
<script src="picturefill.js" async></script>

根據需要（取決於你的目標設備或屏幕尺寸）創建您的圖像。並使用下面的腳本添加它們：

<picture> 
    <source srcset="images/large-kitten.jpg" media="(min-width: 1000px)"> 
    <source srcset="images/medium-kitten.jpg" media="(min-width: 800px)"> 
    <img srcset="images/fallback-kitten.jpg" alt="Kitten"> 
</picture>

也有一些缺點，如：

JS-禁用瀏覽器只能看到alt文本。
在某些瀏覽器中爲picture使用臨時額外HTTP請求。
源元素限制
媒體屬性支持需要本地媒體查詢支持。

另外，添加一個公平大小的圖像，並使用以下CSS：

img { 
    max-width: 100%; 
}

來源

2015-03-04 21:21:46 asherstoppard

責任網站的圖片尺寸網站

回答

相關問題