Question

如何为多个屏幕的尺寸选择图像尺寸以便在所有设备上负责？

Answer 1

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-Disabled浏览器只会看到alt文字。
在某些浏览器中发送picture临时额外HTTP请求。
源元素限制
媒体属性支持需要本机媒体查询支持。

或者，添加一个大小合适的图像并使用以下CSS：

img {
    max-width: 100%;
}

责任网站的图像大小

1 个答案: