技术栈

【css-banner图片自适应】

聚宝盆_2023-10-07 16:16
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;
    }
}
上一篇:Vue Router学习(四)—— 嵌套路由
下一篇:android native C++编程实现数据库加密sqlcipher
相关推荐
asdzx67
7 分钟前
在 React 中轻松实现 PDF 转 Word:纯前端 WASM 方案实战
前端·react.js·pdf
爱勇宝
9 小时前
第 1 章:别把“需求文档”当成真正的需求
前端·后端·程序员
梨子同志
9 小时前
常用命令
前端
梨子同志
10 小时前
React 状态管理
前端
Dxy1239310216
10 小时前
MySQL索引完整教程:创建、查看、修改、删除与日常管理
前端·javascript·mysql
剪刀石头布啊
10 小时前
js能被遍历的集合有哪些特征,为何能被遍历
前端
剪刀石头布啊
10 小时前
js解构
前端
剪刀石头布啊
10 小时前
防抖功能的逐步递进
前端
剪刀石头布啊
10 小时前
对象的大小比较与面向对象思考
前端
端庄的战斗机
11 小时前
javascript 设计模式(文章很长,请自备瓜子,水果和眼药水)
开发语言·javascript·设计模式
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf03AI科技热点日报 | 2026年07月01日04【AI】2026 年具身智能模型和世界模型总结052026 年 AI 大模型 & AI 编程工具实战全总结062026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?072026 AI 编程工具选型横评:Cursor / Claude Code / Trae / Copilot 到底选谁(建议收藏·避坑版)082026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?09Agnes AI 免费 API 接入指南:文本、生图、生视频,一套接口全免费102026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?