前端【响应式图片处理】之 【picture标签】

简介: 前端【响应式图片处理】之 【picture标签】

🌟前言

哈喽小伙伴们,前端开发过程中经常会遇到一些图片的处理,比如在多端展示图片的时候需要自适应显示,也就是前端不同的屏幕大小请不同的图片尺寸显示;所以,我们应该怎么做呢?一起来看下吧。

🌟目前最常见的解决方案

作为一般规则,你会在任何响应式网站中发现以下CSS样式:

img {
    max-width: 100%;
    height: auto;
}

此代码使用 max-width:100% 的设置,以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度,图像将随之缩小。 height:auto 的设置可以确保当有这种情况发生时,图像将以自身的宽高比保留。

🌟新的解决方案<picture>

<picture> 是HTML5一个新的元素。它允许你放置多个 source 标签,以指定不同的图像文件名,进而根据不同的条件进行加载。


它可以让你根据以下条件加载完全不同的图像:


媒体特性结果如:视口的当前高度(viewport height),宽度(width),方向(orientation)。

像素密度

反过来这也意味着您可以:


加载适当大小图像的文件,使可用带宽得到充分利用。

加载不同裁剪并具有不同纵横比的图像,以适合于不同宽度的布局变化。

加载更高的像素密度,显示更高分辨率的图像。


🌟<picture>的工作原理

基本工作步骤如下:


1.创建 <picture></picture> 标签。

2.在这些标签内创建一个你想用来执行任何一个特性的 <source> 元素。

3.添加一个 media 属性,用来包含你想要的特性,如视口的当前高度(viewport height),宽度( width ),方向(orientation)等。

4.添加一个 srcset 属性与相应的图像文件名相匹配,进行加载。如果你想提供不同的像素密度,例如Retina显示屏,你可以添加额外的文件名到你的 srcset 属性中。

5.添加一个回退<img>元素。

这里有一个简单的基本的例子,用来检查视口是否小于 768px ,如果小于的话就加载一个较小的图像:

<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 等属性。


同时,您也可以使用这些特性判断设备的方向,从而加载横向或纵向版本的图像,同时您也可以进行大小特性的混合。例如:

<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 属性中添加额外的文件名来实现。例如,让我们来看看屏幕像素密度为 2x 的Retina 代码处理片断:

<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> 兼容性解决方案

如果你现在就想使用<picture> 元素需要通过引入polyfill来解决兼容性问题。

你也可以使用 Picturefill2.0 这个polyfill。

<script src="picturefill.min.js"></a>

IE9

Picturefill在其他的IE版本都可以正常工作,但是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题,在 video 标签内包住你的源元素,这就会使他们在IE9中被识别,例如:

<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>


目录
相关文章
|
1月前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
54 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
72 3
|
10天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
29天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
29天前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
34 2
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
58 3
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
99 1
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
47 13
|
28天前
|
JavaScript 前端开发 开发者
使用 Vue.js 和 Vuex 构建响应式前端应用
【10月更文挑战第2天】使用 Vue.js 和 Vuex 构建响应式前端应用
23 0