网页响应式图片

最近我学到了一个关于响应式图像的新东西，想在这里分享一下。

众所周知，我们可以通过 CSS 和媒体查询创建响应式图像，但是 <picture> element 允许我们根据浏览器视口显示多个图像。

使用 CSS

首先，让我们看一个使用 CSS 的响应式图像示例

 <img  
 src="./src/desktop-img.png"  
 alt="桌面"  
 类="响应"  
 宽度=“100%”  
 />

并给它 CSS 属性

 .响应{  
 宽度：100%；  
 高度：自动；  
 }

如您所见，图像将根据屏幕的宽度进行调整，但如果图像是为大屏幕设计的，并且如果图像包含文本，则该解决方案在较小的屏幕上不是很方便，那么该信息可能会丢失。

带图片元素

<picture> element 让我们可以灵活地为不同的屏幕使用不同的图像。
这 <picture> 元素包含两个标签：一个或多个 <source> 标签和一个 <img> 标签。
这 <source> 标签包含 媒体 和 srcset 特性。浏览器将检查与当前视口宽度匹配的媒体查询，并显示在 srcset 财产。
让我们看看它的例子

 <picture>  
 <source media="(min-width:650px)" srcset="./src/desktop-img.png" />  
 <source media="(min-width:465px)" srcset="./src/mobile-img.png" />  
 <img src="./src/mobile-img.png" alt="桌面" style="width: 100%;" />  
 </picture>

在这里，我展示了一个 桌面图像 对于宽度大于等于 650px 的视口和 移动图像 对于宽度大于等于 465px 的视口。
而且我还给了默认图像 <img> 标签。如果没有满足任何媒体查询条件，它将显示此图像。

您可以阅读更多关于 <picture> 标签 这里 .

感谢您的阅读！
随意连接 推特

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11666/51010311