<div> <p>srcset w 自动选择:</p> <img sizes="(min-width: 600px) 600px, 300px" src="https://vmat.gtimg.com/kt/ktweb/pay/imgs/act/cql@1x.png" srcset="https://vmat.gtimg.com/kt/ktweb/pay/imgs/act/cql@1x.png 300w, https://vmat.gtimg.com/kt/ktweb/pay/imgs/act/cql@2x.png 600w, https://vmat.gtimg.com/kt/ktweb/pay/imgs/act/cql@3x.png 1200w" > </div>
css
html, body { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding: 0 20px; box-sizing: border-box; } p { font-size: 28px; line-height: 2; text-align: center; } img { display: block; width: 300px; } @media screen and (min-width: 600px) { img { width: 600px; } } div { margin: 0 auto; }
原文地址:https://www.cnblogs.com/chao202426/p/12221715.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。