技术栈

【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
相关推荐
陈振wx:zchen2008
3 小时前
JavaScript
javascript·js
我是伪码农
3 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜
3 小时前
fetch-event-source源码解读
前端·javascript
用户3905133219288
3 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端
朱昆鹏
4 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek
4 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
永远是我的最爱
4 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安
4 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode
5 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd
5 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services03openclaw配置教程(linux+局域网ollama)04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决08在Trae中使用Pencil MCP09Claude Code Skills 实用使用手册10Vue-skills的中文文档