如何解决如何使图像具有响应性?
不知道如何让浏览器在某些断点处使用正确的图像。
<!-- <picture>
<source sizes="(max-width: 640px) 100vw,640px" srcset="./images/profile1000.avif 1280w,./images/profile.avif 640w,./images/profile120.avif 320w" type="image/avif" />
<source sizes="(max-width: 640px) 100vw,./images/profile.webp 640w,./images/profile120.webp 320w" type="image/webp" />
<source sizes="(max-width: 640px) 100vw,./images/profile.png 640w,./images/profile120.png 320w" type="image/png" />
<img width="421" height="421" decoding="async" loading="lazy" src="./images/profile.png" alt="profile image" class="bg-clip-padding bg-opacity-50 shadow rounded-full bg-white dark:bg-gray-900 backdrop-blur-2xl" />
</picture> -->
<picture>
<source media="(min-width: 2560px)" srcset="./images/profile1000.png,./images/profile1000.webp,./images/profile1000.avif" type="image/avif" />
<source media="(min-width: 1080px)" srcset="./images/profile.png,./images/profile.webp,./images/profile.avif" type="image/avif" />
<source media="(min-width: 1024px)" srcset="./images/profile120.png,./images/profile120.webp,./images/profile120.avif" type="image/avif" />
<img src="./images/profile1000.webp" alt="profile image" decoding="async" loading="lazy" class="bg-clip-padding bg-opacity-50 shadow rounded-full bg-white dark:bg-gray-900 backdrop-blur-2xl" />
</picture>
解决方法
您应该为每种格式使用单独的源声明并为每种格式指定类型。 请参阅官方指南:https://avif.io/blog/tutorials/use-avif-in-html/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。