技术栈

【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
相关推荐
gnip
16 小时前
JavaScript事件流
前端·javascript
小菜全
17 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C
17 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG
17 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_45690427
17 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路
17 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa
17 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事
17 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss
17 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#
17 小时前
百度前端社招面经二
前端
热门推荐
01UV安装并设置国内源02A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程032025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享,全网首发高质量!!!04UV 工具安装与国内镜像源配置指南052025年数学建模国赛C题超详细解题思路06解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题07不再让Windows更新!&Edge游戏助手卸载及关闭自动更新08Linux下V2Ray安装配置指南09KGG转MP3工具|非KGM文件|解密音频10突破百度网盘的下载限速,两种方法教会你【超详细】