责任网站的图片尺寸网站

如何在所有设备上为多个屏幕尺寸选择图片尺寸以承担责任？责任网站的图片尺寸网站

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

责任网站的图片尺寸网站

回答

相关问题