图片自适应各种设备尺寸

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

    			本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。