响应式图片 <img src=,srcset=,sizes=>

最新推荐文章于 2024-07-16 23:35:46 发布
最新推荐文章于 2024-07-16 23:35:46 发布
阅读量5.1k 收藏 1
点赞数
分类专栏： 前端 文章标签： srcset img sizes 响应式 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyr12/article/details/50211689
版权
本文介绍了响应式图片的概念，包括在不同设备和分辨率下展示合适图片的需求。通过CSS样式和HTML的新属性srcset及sizes，详细阐述了如何实现响应式图片。讨论了媒体查询的使用，并提供了相关例子，解释了如何根据设备像素比选择合适的图片资源。
摘要由CSDN通过智能技术生成

一、什么是响应式图片？

根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。

1、同样是普通屏幕（相对与retain等高清屏幕而言）上，在手机屏幕上显示小图片，在电脑浏览器上显示大图片。
2、同样大小的屏幕上，普通设备上显示普清图片，高清屏幕（如 retain屏幕）的设备上显示高清图片。

二、如何实现响应式图片？

1、使用一张图片+css样式

<div style="text-align: center" style="width: 100%">  
     <img src="css/a.png" style="width: 80%">
最低0.47元/天 解锁文章
zyr12
关注
专栏目录
你不知道的＜img＞
liuhao9999的博客
11-18 742
src属性是必须的，它包含了你想嵌入的图片的文件路径。 alt属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。 还有很多其他属性，可以实现各种不同的目的： Referrer/CORS控制，保证安全与隐私：详见crossorigin属性和referrerpolicy...
浅谈CSS响应式图片运用中的srcset属性
12-13
介绍 在整个网站的开发中，在管理图片上较为困难。注意，图片要在各种设备上平滑过渡显示，它们将会碰到的问题有：     适当的优化和减少图片的体积    注意不要浪费带宽（网站的成败与否加载速度是其中主要因素之一）    设备使用相应的解决方案 对于第一个问题，使用TinyPng和JPEGmini工具可以帮助减少图片的体积和优化图片。 对于第二个问题，在一些场合下我们可能要使用到强大的媒体查询。多亏了有他们，我们可以很简单的处理背景图片的问题。但是，有些地方使用的是img来显示图片，这也是我们要解决的第三个问题，也是最后一个问题，如何根据设备的分辨率调用合适的图像。 在这种情况之下，有个两个解决
响应式图像
qq_41973396的博客
08-19 272
响应式图像前言下面给大家 前言 什么是响应式图像呢，你可以这样理解，在不同设备，有着良好的显示效果，图像可以根据不同设备去变化，就可以理解为“响应式图像” 下面给大家 ...
img的srcset属性的作⽤？
2301_79577017的博客
06-26 262
其中srcset指定图片的地址和对应的图片质量。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。
响应式图片（srcset属性和picture元素）
前端精髓
10-10 1322
自适应网页设计意味着，不仅我们的布局能根据设备特性而变化，内容也可以。 例如，高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度。 当浏览器宽度为 800px 时，一张 50% 宽度的图像或许很适合，但在一款很窄的手机上，则会占用太多屏幕空间，并且缩小图像来适应较小的屏幕时，耗费的带宽开销却是一样的。 你知道吗？加载网页时，平均 60% 以上的流量都来加载图片。HTML 中 img 元素很强大，它可下载、解码然后渲染内容，而现代浏览器支持众多图像格式。跨设备使用图像与桌面端并无太大区别，只需做一些微小调.
img响应式图片
qq_26642611的博客
02-25 368
img响应式图片
前端src显示服务器图片,响应式图像之srcset和sizes属性
weixin_39693437的博客
08-11 949
再一次提到响应式图像，司空见惯了，有点腻了，如果你看完下面的内容，我觉得你会对响应式图像处理会有新的认知。这篇文章我也是无意在进步博客上看到的，认真的看了几遍，有些东西讲的很不错，所以想分享下。开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大...
响应式图片新属性srcset、sizes及<picture>、<source>、media的有效性测试
peterzhangsnail的博客
03-29 3798
1.写在前面测试时间：2018/3/28测试工具及方法： Firefox developer edition-mozila浏览器的responsive design mode2.涉及的知识点CSS媒体查询-MDN响应式图片— srcset 和 sizes 属性响应式图片英文资料1英文资料23.测试项目及结果总结(1)测试用图片(100px、300px、600px、800px)(2)srcset+s...
src和href的区别，并且img中的srcset的作用是什么？
weixin_47450807的博客
04-16 1642
一、src和href的区别 src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。 href是指网络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。比如link标签。 二、知道img的
响应式图像与多媒体：Srcset与Sizes属性应用
通过使用弹性网格布局、弹性图片和媒体查询等技术，响应式设计能够自动适应不同屏幕尺寸和分辨率，提供更一致的用户体验。 1.2 响应式设计中图片与多媒体的重要性 在响应式设计中，图片与多媒体元素扮演着至关重要...
imgsize:一个简单的Web应用程序，用于调整图像大小
05-21
图片大小 图像大小是一种用于即时调整图像大小的简单网络应用。 它采用URL，宽度和高度以及方法，并在URL处生成图像的调整大小版本。 这样做的目的是使在不允许调整图像大小或其他类似情况的论坛中嵌入图像变得更加容易。 要求 ：用于调整图像的Go包。 ：数据库/ sql软件包的PostreSQL驱动程序。 赫鲁库 该应用程序主要是为在Heroku上部署而设计的，但应该很容易转换为几乎任何其他系统。 它没有基于Heroku的特殊要求，并且不使用任何特定于Heroku的功能。
img标签中的srcset属性有什么用？
Jan's的博客
05-23 2380
我的博客https://blog.ideaopen.cn/ img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说，我们不需要使用JavaScript也可以实现分辨率自适应。 当然，仅限于图片，也就是img标签。 属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。 像这样就可以表示浏览器宽度达到800px则加载middle.jpg达到1400px则加载big.jpg。 注意：像素密度描述只对固定宽度图片有效。 img元素的 si
响应式图片相册
weixin_45723705的博客
03-27 575
废话少说，直接上代码，然后再详细介绍构造过程。 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式图片相册</title> <style> * {/*设置全局格式*/ box-sizing: border-box;/*并排放置两个带边框的框*/ } div.img { border: 2px solid purple;/
css srcset,研究一下响应式图片加载属性srcset和sizes_html/css_WEB-ITnose
weixin_32388647的博客
08-04 307
元旦过后又长一岁，然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4，就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性：srcset和sizes。比如：这俩个属性的作用是为不同显示尺寸加载不同的图片源，这样就能在图片本身做到“响应式”，而不仅仅是跟随屏幕尺寸了。比如上面图中的srcset为 srcset=".../gt...
响应式图像_为什么我们需要响应式图像
cunya6061的博客
09-22 277
The topic of responsive images has been one of the most hotly debated topics amongst web developers for what feels like forever. I think Jason Grigsby was perhaps the first to publicly point out that ...
img srcset 和 sizes
weixin_30753873的博客
07-05 206
img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题，比方说我需要在retina高的硬件上看到更细腻的图片，又或者我要在电脑看到的图片和在手机上的图片不一样。 解决以上问题，我们可以使用css 中的@media 去实现，可是代码量超出了想象。有了这功能我们就能很好的处理需求，接下来我做个简单的解释，循序渐进的给大家说明。 1. 高 retina ...
响应式图片优化：srcset与sizes属性的使用技巧
你若盛开，清风自来
07-16 683
本文将介绍响应式图片中srcset和sizes属性的概念、作用及其在实际项目中的应用，帮助读者更好地理解响应式图片技术，提升网页的适应性和用户体验。srcset属性是一个用于指定图片多个版本的属性，它允许浏览器根据屏幕大小和分辨率选择最佳的图片版本。通过使用像素密度（DPI）和宽度（w）值来定义多个图片版本，srcset属性可以提高网页的性能和视觉效果。sizes属性是一个用于指定图片在不同屏幕尺寸下的宽度的属性，它允许浏览器根据屏幕大小自动调整图片的大小。
如何为一个img标签设置宽度和高度，加上src
热门推荐
可了不得
02-06 1万+
如何为一个img标签加上一个图片的src，并设置宽度和高度 答案： 首先一部分人的一般反应可能是要不就用css，要不就写行内样式但是，你们有没有想过img是什么？块级元素？不，他是行内元素行内元素和块级元素的一大区别就是不能为他设置宽高，设置了也没有用，那么我们最后的结果为什么还是那个呐？ps：常见的行内元素有：img input a label span原因是，img是一个置换元素或者替换元素
如何在HTML中设置响应式图片以适应不同屏幕大小？
最新发布
09-11
在HTML中设置响应式图片以适应不同屏幕大小，通常可以使用`<img>`标签的`srcset`属性和`sizes`属性，或者使用CSS的媒体查询来调整图片的大小。以下是具体的实现方法： 1. 使用`<img>`标签的`srcset`和`sizes`属性： `srcset`属性可以指定一系列的图片源，浏览器会根据设备的特性（例如屏幕大小或分辨率）选择合适的图片进行加载。`sizes`属性则定义了图片显示的尺寸，通常结合CSS媒体查询使用。 ```html <img srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w" sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px" src="default.jpg" alt="响应式图片"> ``` 在这个例子中，`srcset`定义了三个不同宽度的图片源，`sizes`定义了在不同屏幕宽度下图片应该使用的尺寸。 2. 使用CSS媒体查询： 可以通过CSS媒体查询直接设置图片的宽度，使其在不同屏幕尺寸下显示不同的大小。 ```css img { width: 100%; height: auto; } @media (max-width: 320px) { img { width: 320px; } } @media (min-width: 321px) and (max-width: 640px) { img { width: 640px; } } ``` 这里设置了图片默认宽度为100%，高度自动调整以保持图片比例。然后通过媒体查询定义了在不同屏幕宽度下图片的具体宽度。 3. 使用CSS的视口宽度单位（vw）： 另一种方法是使用CSS的视口宽度单位（vw），视口宽度单位基于视口宽度的百分比来设置元素大小。 ```css img { width: 50vw; /* 图片宽度设置为视口宽度的50% */ height: auto; } ``` 注意：使用视口宽度单位可能会导致图片过大或过小，需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值