图片自适应各种设备尺寸

2024-01-09 10:38:56

设置响应式图片:

  • 在HTML中,你可以使用<picture>元素或srcset属性来为不同的设备和视口尺寸提供不同的图片版本。
  • <picture>元素允许你根据不同的条件(如浏览器支持、视口宽度等)提供多种媒体资源。
  • srcset属性允许你指定多个图像版本,浏览器会根据设备能力和视口宽度选择合适的版本。
 

复制代码

html`<!-- 使用 <picture> 元素 -->
<picture>
<source srcset="large.jpg" media="(min-width: 1000px)">
<img src="small.jpg" alt="描述">
</picture>
<!-- 使用 srcset 属性 -->
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 2000px"
src="fallback.jpg" alt="描述">`

文章来源:https://blog.csdn.net/elirlove1/article/details/135472499
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。