响应式图片(自适应图片)

klinson 发布于2019-08-02 14:21 / 1967人阅读

摘要：虽然在简单图形图案界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。为了兼容老旧浏览器，我们可以在标签当中指定类型，使用属性，并在当中指定相应格式的图片

在这篇文章中讨论的新特性 — srcset/sizes/ — 都已经被新版本的现代浏览器和移动浏览器所支    持（包括Edge，而不是IE）。

解决的问题

分辨率切换问题：小屏手机屏幕上显示网页，那么没有必要在网页上嵌入pc端的大图片，浪费带宽

艺术方向问题：当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示pc端的大图，这样会显得图片缩小，重要地方不突出

分辨率切换问题 不同分辨率加载不同尺寸的图片

需要说明的几点如下:

srcset语法: "图片路径物理像素, 图片路径物理像素, ....."

size: "媒体查询 css像素"

src: 当浏览器不支持上面的属性的时候，默认加载这里

加载的流程如下:

查看设备宽度

检查sizes列表中哪个媒体条件是第一个为真

查看给予该媒体查询的槽大小

加载srcset列表中引用的最接近所选的槽大小的图像

在很多pc端上，1px=1w

不同的分辨率加载相同的尺寸


     
img {
    width: 320px;
}

一般情况下当我们给img设置固定的宽的时候,为了在不同的dpr设备上显示相同的大小，可以配合x来，例如1.5x代表dpr为1.5的设备

艺术问题

需要说明的几点:

source当中的也可以使用srcset、sizes属性

必须提供一个img元素，以备浏览器不支持的时候使用

为什么不使用css和javaScript来完成图片替换

因为你不能先加载好元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

另一种方式svg

位图由以像素为单位的宽和高表示，如果位图显示的尺寸大于原始尺寸，一张较小的位图看来会有颗粒感（然而矢量图不会这样）

但是它不适用于所有的图片，在某种程度上是这样的——它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。

虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。加载会消耗更多的带宽。

使用现代图像格式

有很多令人激动的新图像格式（例如WebP和JPEG-2000）可以在有高质量的同时有较低的文件大小。然而，浏览器对其的支持参差不齐。

为了兼容老旧浏览器，我们可以在标签当中指定MIME类型，使用type属性，并在srcset当中指定相应格式的图片

私有云混合云图片自适应图片大小自适应 asp图片自适应 css图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53748.html

（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

rockswang 2019-08-20 14:45 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

dockerclub 2019-08-30 15:53 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

Ilikewhite 2019-08-01 16:24 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
移动前端 - 收藏集 - 掘金

摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...

Jochen 2019-08-29 12:43 评论0 收藏0