【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;
    }
}
相关推荐
跑调却靠谱10 分钟前
elementUI调整滚动条高度后与固定列冲突问题解决
前端·vue.js·elementui
呵呵哒( ̄▽ ̄)"28 分钟前
React - 编写选择礼物组件
前端·javascript·react.js
Coding的叶子33 分钟前
React Flow 简介:构建交互式流程图的最佳工具
前端·react.js·流程图·fgai·react agent
apcipot_rain5 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
油丶酸萝卜别吃6 小时前
OpenLayers 精确经过三个点的曲线绘制
javascript
ShallowLin6 小时前
vue3学习——组合式 API:生命周期钩子
前端·javascript·vue.js
Nejosi_念旧6 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
互联网搬砖老肖6 小时前
Web 架构之攻击应急方案
前端·架构
pixle06 小时前
Vue3 Echarts 3D饼图(3D环形图)实现讲解附带源码
前端·3d·echarts
麻芝汤圆7 小时前
MapReduce 入门实战:WordCount 程序
大数据·前端·javascript·ajax·spark·mapreduce