【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;
    }
}
相关推荐
TON_G-T1 分钟前
useEffect为什么会触发死循环
java·服务器·前端
Aurorar0rua8 分钟前
CS50 x 2024 Notes C - 02
前端
海参崴-26 分钟前
C++代码格式规范
java·前端·c++
Dxy123931021639 分钟前
JavaScript 如何捕获异常:从基础到进阶的完整指南
开发语言·javascript·udp
谢尔登44 分钟前
【React】setState 触发渲染的流程
前端·react.js·前端框架
摸鱼仙人~1 小时前
Vue中markdown-it基础使用教程
前端·javascript·vue.js
落魄江湖行1 小时前
入门篇二:Nuxt 4路由自动生成:告别手动配置路由的日子
前端·vue.js·typescript·nuxt4
CQU_JIAKE2 小时前
4.4【Q】
java·前端·javascript
小陈工2 小时前
Python Web开发入门(十二):使用Flask-RESTful构建API——让后端开发更优雅
开发语言·前端·python·安全·oracle·flask·restful
木斯佳2 小时前
前端八股文面经大全:字节前端一面(2026-04-03)·面经深度解析
前端·面试题·面经