搜索内容：
时间：2019-08-02
编辑:网站制作公司
877
0
众所周知，图像是响应式网页设计中最具挑战性的方面之一。今天我们就来看看如何的<picture>元素，解决了响应图像的问题，可以用现在。杭州高端网站建设
固定宽度，像素完美网站设计的日子已经完全落后于我们。在宽屏显示器，互联网电视，多尺寸平板电脑和智能手机的当今，我们的设计现在必须满足从320px宽到可能高达7680px宽的所有设备。
除了这种多分辨率的景观外，还需要对图像进行拉伸或缩小以适应这些各种各样的要求。这可以证明是一个问题，因为除了矢量图形之外，绝大多数图像具有不改变的基于像素的特定宽度。
那么我们该怎么办？
作为一般规则，您可以在任何响应式网站的CSS中找到以下内容：
1 2 3 4 | img { max-width: 100%; height: auto; } |
此代码使用该 max-width: 100%;设置确保图像永远不会超出其父容器的宽度。如果父容器缩小到图像宽度以下，图像将随之缩小。该 height: auto;设置可确保在发生这种情况时保留图像的宽高比。
它在一个方面解决了这个问题，允许我们在许多不同的环境下显示相同的图像。但它不允许我们为不同的情况指定不同的图像。
<picture> 是一个新元素，它被设置为HTML5的一部分。
它将使响应式图像的处理速度与当前<audio>和<video>元素的工作方式一致。它允许您放置多个source标签，每个标签指定不同的图像文件名以及应加载它们的条件。
它将允许您加载完全不同的图像取决于：
媒体查询结果，例如视口高度，宽度，方向
像素密度
这反过来意味着你可以：
适当加载文件大小的图像，充分利用可用带宽。
加载具有不同宽高比的不同裁剪图像，以适应不同宽度的布局更改。
为更高像素密度显示器加载更高分辨率的图像
与之合作的基本步骤<picture>是：
创建开始和结束<picture></picture>标记。
在这些标记内，<source>为要运行的每个查询创建一个元素。
添加media包含查询的 属性，例如视口高度，宽度，方向等。
添加srcset具有相应图像文件名的 属性以加载。
srcset如果要提供不同的像素密度，请为属性添加额外的文件名 ，例如Retina显示。
添加一个后备<img>元素。
这是一个检查视口是否小于768px的基本示例，如果是，则加载较小的图像：
1 2 3 4 五 | <picture> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <img srcset="default.jpg" alt="My default image"> </picture> |
您会注意到media属性中使用的语法与创建CSS媒体查询时使用的语法 相同。您可以使用相同的检查，这意味着你可以查询max-width，min-width，max-height，min-height，orientation等。
您可以使用这些检查来执行诸如根据设备方向加载图像的横向或纵向版本之类的操作，并且您仍然可以同时混合大小查询。例如：
1 2 3 4 五 6 7 | <picture> <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)"> <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)"> <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)"> <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)"> <img srcset="default_landscape.jpg" alt="My default image"> </picture> |
上面的代码在较小的横向设备上加载较小的横向裁剪版本的图像。它在较大的横向设备上加载相同图像的较大版本。
如果设备是纵向的，则会加载纵向裁剪版本，小尺寸设备上的小尺寸或大尺寸设备上的大尺寸。
如果要为更高密度的显示提供不同分辨率的图像版本，可以通过向srcset属性添加额外的文件名来实现 。例如，让我们看一下上面的第一段代码，处理Retina的2x分辨率：
1 2 3 4 五 | <picture> <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)"> <source srcset="default.jpg, default_retina.jpg 2x"> <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image"> </picture> |
仍会首先评估媒体查询，以便您可以控制图像在屏幕上显示的尺寸。然后将检查显示器的像素密度，如果用户的首选项支持和允许更高的密度，则将加载更高密度的图像版本。
杭州高端网站建设目前，原生实施<picture>适用于Chrome，Firefox和Opera。在未来，我们可能会看到广泛的支持，因为其他浏览器也会流行起来。但目前支持仍未到来。
与此同时，如果您想立即开始使用，则无需等待<picture>。你只需要使用Picturefill 2.0 ; 由Filament Group的聪明人提供的polyfill 。
将picturefill.js文件下载 到您的项目后，只需将其加载到您站点的head部分即可实现：
1 | <script src="picturefill.js"></script> |
还可以选择异步加载脚本以提高效率，您可以在Picturefill的文档中阅读。
加载此脚本后，该<picture>元素将按照我的解释工作，只有一些限制。
Picturefill适用于其他IE版本，但是IE9无法识别 source包含在picture标签中的元素 。为了解决这个问题，有条件地将源元素包装在 video标签中，然后使它们对IE9可见，例如：
1 2 3 4 五 6 7 | <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <!--[if IE 9]></video><![endif]--> <img srcset="default.jpg" alt="My default image"> </picture> |
与IE9一样，Android 2.3无法查看 source元素内部的 picture元素。但是，它可以srcset在常规img标记上使用时理解该 属性 。请确保始终img在srcsetAndroid 2.3 的属性和可能存在相同问题的任何其他浏览器中包含带有默认文件名的回退元素 。
由于这是一个基于JavaScript的解决方案，因此需要在浏览器中启用JavaScript。Picturefill 2.0不提供“no-js”解决方法，因为如果这样做，<picture>则在推出本机浏览器支持时会出现多个图像。但是，如果您必须使用“no-js”选项，则可以选择使用Picturefill 1.2。
Picturefill的另一个要求是支持本机媒体查询，以使media 属性中的查询 起作用。所有现代浏览器都支持媒体查询，IE8及更低版本是唯一不具备剩余用户群的非支持浏览器。
在具有原生支持srcset但尚未 支持的浏览器中， 可能会在确定来自元素的更合适的图像之前请求picture回退img元素中 指定的文件名 source。
杭州高端网站建设这只是一个临时问题，一旦本地 picture实现推出就会消失。
3
s后返回登录
3
s后返回登录
