You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!--Change the browser window width to see the image change.--><picture><sourcesrcset="/media/cc0-images/surfer-240-200.jpg"
media="(min-width: 800px)"><imgsrc="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>
img的srcset的作用
img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如:
上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ,达到 1400px 则加载 big.jpg。注意:像素密度描述只对固定宽度图片有效。
img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。
属性格式:媒体查询 宽度描述(支持px),多条规则用逗号分隔。
上面的例子表示浏览器视口为 320px 时图片宽度为 300px,其他情况为 1200px。
还有哪一个标签能起到跟srcset相似作用?(追问)
<picture>
:picture 元素HTML
<picture>
元素通过包含零或多个<source>
元素和一个<img>
元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子<source>
元素,如果没有匹配的,就选择<img>
元素的 src 属性中的URL。然后,所选图像呈现在<img>
元素占据的空间中。要决定加载哪个URL,用户代理检查每个
还有什么能起到跟srcset相似作用?(追问)
css image-set()
上述代码将会为普通屏幕使用 pic-1.jpg,为高分屏使用 pic-2.jpg,如果更高的分辨率则使用 pic-3.jpg,比如印刷。
The text was updated successfully, but these errors were encountered: