【css-banner图片自适应】

html 复制代码
<picture>
            <source media="(max-width: 480px)" srcset="图片地址">
            <source media="(min-width: 481px)" srcset="图片地址">
            <img src="图片地址" id="homebanner">
        </picture>
css 复制代码
img{
    height: 290px;
    width: 100%;
}
// 小于992px
@media (max-width: 992px) { 
    img{
        width: 100%;
        height: 180px;
    }
}
相关推荐
陈振wx:zchen200820 分钟前
JavaScript
javascript·js
我是伪码农28 分钟前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜31 分钟前
fetch-event-source源码解读
前端·javascript
用户390513321928832 分钟前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端
朱昆鹏1 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek1 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
永远是我的最爱1 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安1 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode2 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd2 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup