响应式图片二通过srcset实现

最新推荐文章于 2025-07-08 15:23:59 发布

原创最新推荐文章于 2025-07-08 15:23:59 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#响应式 #图片

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

响应式布局问题

5 篇文章

订阅专栏

本文介绍了一种通过使用HTML的srcset属性实现响应式图片加载的方法。这种方法允许浏览器根据设备的特性（如分辨率和屏幕像素比）来选择合适的图片版本进行加载，从而优化不同设备上的图片显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体方法如下：
srcset=”图片地址+空格+尺寸描述符,图片地址+空格+尺寸描述符,图片地址+空格+尺寸描述符….”
浏览器会当前浏览的环境进行感知，这个感知包括网速、界面分辨率、DPR（屏幕像素比）等等，然后在图片中选择一个进行加载。
实际上，在相同DPR下，浏览器会根据屏幕的分辨率加载图片，但是加载了大的图片后再缩小还是会使用大的图片。综合考虑的算法非常复杂，一般不用考虑

DPR :物理像素和显示像素的比值，Mac 是2 普通电脑是1
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-wodth,initial-scale=1.0">
    <style type="text/css">
        html,*{
            margin:0;
            padding: 0;
        }
        .content{
            width: 100%;
            margin:0 auto;
        }
        .content img{
            display: block;
            width: 100%;
            max-width: 100%;
        }
    </style>

</head>
<body>
<div class="content">
    <img src="480.jpg" srcset="480.jpg 480w,800.jpg 800w,1600.jpg 1500w">
</div>

</body>
</html>