技术栈

【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
相关推荐
JustHappy
20 分钟前
古法编程秘籍(六):程序到底是怎么跑起来的?从 IO 到中断,一次讲明白
前端·后端·全栈
HYCS
40 分钟前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
卷帘依旧
1 小时前
useImperativeHandle的作用
前端
卷帘依旧
1 小时前
Hooks在Fiber上的存储原理
前端
you4580
1 小时前
学成在线--day02 CMS前端开发(含Vue基础知识得回顾)
前端·javascript·vue.js
想吃火锅1005
1 小时前
【leetcode】1.两数之和js版
javascript·算法·leetcode
xiaofeichaichai
1 小时前
虚拟 DOM
前端·javascript·vue.js
#麻辣小龙虾#
1 小时前
小学三年级语文小游戏
css·html·css3
2401_87845453
1 小时前
前端高频得手写题
前端
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结032026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南:Windows 和 macOS 官方版下载052026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?06【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08Agnes AI 全模态 API 免费实测报告:文生图 + 文生视频完整测试09CC-Switch & Claude 基于 Linux 服务器安装使用指南10AI科技热点日报 | 2026年6月1日