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

最新推荐文章于 2024-06-26 17:04:25 发布
最新推荐文章于 2024-06-26 17:04:25 发布
阅读量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
关注
专栏目录
HTML+CSS素材包，响应式布局开发代码资料
02-16
使用`img`元素的`srcset`属性和`sizes`属性可以根据设备的视口宽度提供不同大小的图片，优化加载速度： ```html <img src="image.jpg" srcset="image-sm.jpg 320w, image-md.jpg 480w, image-lg.jpg 800w" ...
H5中＜img＞的srcset、size属性及＜picture＞介绍
carcarrot的博客
10-14 5054
img标签srcset、size属性 （HTML 5.1规范） srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。 sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。 srcset属性列出了浏览器可以选择加载的源图像池，是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset
响应式图片img中的srcset和sizes
web前端学习总结
09-28 5505
响应式图片img中的srcset和sizes 参考链接 如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入很大的图片。这被称之为分辨率切换问题（resolution switching problem）—一张位图被设置为固定像素的宽和高。当我们看矢量图形时，一张较小的位图看来会有颗粒感，如果位图显示的尺寸大于原始尺寸（然而矢量图不会这样）。 相反，没有必要在比图片实际尺寸小的屏幕上显示一张...
img的srcset属性的作⽤？
2301_79577017的博客
06-26 245
其中srcset指定图片的地址和对应的图片质量。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。
前端src显示服务器图片,响应式图像之srcset和sizes属性
weixin_39693437的博客
08-11 948
再一次提到响应式图像，司空见惯了，有点腻了，如果你看完下面的内容，我觉得你会对响应式图像处理会有新的认知。这篇文章我也是无意在进步博客上看到的，认真的看了几遍，有些东西讲的很不错，所以想分享下。开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大...
html picture属性,html5图片 srcset、sizes 属性和 picture 元素
weixin_42559413的博客
06-04 650
前言关于图片img的响应属性srcset,和sizes及picture，很久之前看过，但是因为浏览器兼容原因，一直没有在项目中使用，但是最近发现，这几个属性兼容性还可以了，可以去caniuse中看一下，基本可以在项目中使用了。今天，简单介绍一下这几个属性。srcset 和 sizes 属性srcset 是一个包含一个或多个源图的源图容器，不同源图用逗号分隔，每一个源图由下面两部分组成：1、图片 U...
在img标签限制图片大小
weixin_35756892的博客
01-04 5643
要限制图片大小，你可以使用 HTML 的 img 标签的 width 和 height 属性。例如： <imgsrc="image.jpg" width="500" height="600"> 这样，图片的宽度就会被限制在 500 像素，高度被限制在 600 像素。 注意，如果你只设置了一个属性(例如只设置了 width)，图片的比例可能会改变。为了保持图片的原有比例，你应该同时设置...
图片：响应式设计着陆页练习
02-12
<img src="image.jpg" alt="示例图像" srcset="image-sm.jpg 480w, image-md.jpg 720w, image-lg.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33.33vw"> ``` 在上面的例子中，浏览器...
响应式组合
02-22
<img src="image.jpg" srcset="image-sm.jpg 320w, image-md.jpg 768w, image-lg.jpg 1024w" sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33.33vw"> ``` 这会根据用户设备的宽度和像素密度选择最...
<CSS强制图片自适应大小>
07-14
特别是在响应式设计中，如何让图片能够根据容器或者视口的大小自动调整自己的尺寸是非常重要的。本文将详细介绍如何通过CSS实现图片的自适应大小，并提供具体的代码示例。 #### 一、基本概念 在CSS中，可以通过...
html5图片响应式布局点击弹出大图切换特效
11-04
- `<img>`元素的`srcset`和`sizes`属性：这两个属性允许浏览器根据设备的视口宽度和像素密度来决定加载哪张图片。 2. **响应式设计**： - 媒体查询（Media Queries）：CSS3中的媒体查询是实现响应式设计的关键，...
imgsize:一个简单的Web应用程序，用于调整图像大小
05-21
图片大小 图像大小是一种用于即时调整图像大小的简单网络应用。 它采用URL，宽度和高度以及方法，并在URL处生成图像的调整大小版本。 这样做的目的是使在不允许调整图像大小或其他类似情况的论坛中嵌入图像变得更加容易。 要求 ：用于调整图像的Go包。 ：数据库/ sql软件包的PostreSQL驱动程序。 赫鲁库 该应用程序主要是为在Heroku上部署而设计的，但应该很容易转换为几乎任何其他系统。 它没有基于Heroku的特殊要求，并且不使用任何特定于Heroku的功能。
博客中修改图片大小及位置的方法（亲测）
寻水的鱼
08-29 1466
话不多说，如题， 1. 图片大小修改方式 A方案： <img src="图片链接" width="40%"> # 40%为你想缩放的任意比例,固定长宽比缩放 以下分别为20%，30%，40%的图片大小 B方案： <img src="图片链接" width="100" height="100"> # 指定任意图片长宽值 以下分别为100x200，150x200的图片大小（图片可能变形哦~） 2. 图片位置修改方式 靠左 居中 靠右对齐： <img src="图片
什么是响应式图片？如何在网页中实现响应式图片？
官方推荐
08-25 7444
什么是响应式图片？如何在网页中实现响应式图片？
《聊聊响应式图片》
CIWEI719318的博客
12-02 188
“响应式（Responsive）”这个词我想大家没有听过一千遍，也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了，比如：《自适应页面设计》。在这篇文章中，我们不讲页面布局的响应式，我们主要来看看“响应式图片”。这篇文章主要内容： 为什么要使用响应式图片 <picture>元素 ...
img srcset,sizes 属性，解决了在不同设备像素比不同的情况加载不同图片（转）...
adtowzpo775078的博客
12-07 441
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/ 转载于:https://www.cnblogs.com/fengxiaopiaoer/p/8000279.html
关于srcset，picture，size
caimaomaocai的博客
04-03 802
   之前一直想好好总结一下响应式图片的知识，可是最近一直在忙着吸收张鑫旭大神所写的《css世界》里面的精华，今天翻看之前写的响应式项目才想起这档事。废话多了点，直接进入正题吧。 img元素的srcset、sizes属性和picture元素是H5新增的内容，主要用来解决不同屏幕下的图片实现最佳的视觉效果srcset 和 sizes属性srcset是一个包含一个或者多个源图的源图容器，主要由图片地址...
img srcset 和 sizes
weixin_30753873的博客
07-05 206
img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题，比方说我需要在retina高的硬件上看到更细腻的图片，又或者我要在电脑看到的图片和在手机上的图片不一样。 解决以上问题，我们可以使用css 中的@media 去实现，可是代码量超出了想象。有了这功能我们就能很好的处理需求，接下来我做个简单的解释，循序渐进的给大家说明。 1. 高 retina ...
img 标签的新属性Srcset应用
王杨杨web开发工程师
01-13 4647
响应式图片srcset属性 说起图片的srcset属性，估计有不少与时俱进的小伙伴会在心中不由自主念想道：“这个我知道的，可以根据屏幕密度现实对应尺寸图片，例如……” 上面代码对应demo轻戳这里。当然，我们也可以简写成： 由于我们都不是“别人家”的公司，因此，我们的办公PC显示器默认设备像素比都是1，因此，这些显示器呈现的图片默认都是128像素宽度的。下面问题来了，
如何在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、付费专栏及课程。

余额充值