网页响应式图片
最近我学到了一个关于响应式图像的新东西，想在这里分享一下。
众所周知，我们可以通过 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/12408/21360412
标签：网页,标签,响应,视口,图像,宽度,CSS,图片 来源： https://www.cnblogs.com/amboke/p/16654838.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。