思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新。

换一种思路,直接用<img>显示出来,这样div作为父容器就被你撑大,就不需要div的高度设置了。然后就看你的图片,如果宽要全部显示,就设置为width:100%; height:auto; 反之就设置为width:auto; height:100%;

<div class="banner">
<img src="banner.jpg"/>
</div>

  

.banner { width:100%; }
.banner img { width:100%; height:auto; }

  

通栏banner自适应各个设备的更多相关文章

  1. html中的banner自适应屏幕代码

    <html> <head> <title>Title</title> <style> .bannerbox { width:100%; po ...

  2. 怎样自适应ios设备大小

       在编写移动端GIS程序的时候.常常要依据ios设备的大小来设置UI.曾经我在ios程序中,须要定义设备的值(如:宽度和高度),如: 可是假设是不同的设备.如iphone4.iphone5,甚至是 ...

  3. Bootstrap自适应各种设备

    <!DOCTYPE html><html><head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title> ...

  4. 浅谈Web自适应

    前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...

  5. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  6. Tiny6410 LED字符设备驱动

    1.查看用户手册 led1.led2.led3.led4 连接的分别是 GPK4.GPK5.GPK6.GPK7 2.查询6410芯片手册 下面还需要3个步骤: 1.设置GPIO为OUTPUT. 将GP ...

  7. Web自适应

    随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难,适配问 ...

  8. 使用ASDM 管理 ciscoASA设备

    用vm虚拟机模拟了一台 ASA设备   自适应安全设备软件为 ASA8.25  asdm镜像为asdm-6.49.bin 用客户端连接时,一定要安装java  jre,版本我是用的是7,6应该也可以. ...

  9. 高效CSS書寫規範及CSS兼容性

    一.選擇器針對性說明 某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> spec ...

随机推荐

  1. 【MFC系列】MFC快速设置控件文本字体、大小、颜色、背景

    以静态文本为例,分享一下怎么修改文本字体.大小.颜色.背景等参数.其他文本.控件等可参照修改. 1.修改字体.大小 这个很简单,首先在Dlg类中声明一个CFont类型的成员变量: 然后在类的初始化函数 ...

  2. 如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果

    今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...

  3. 浅谈Spark2.x中的Structured Streaming

    在Spark2.x中,Spark Streaming获得了比较全面的升级,称为Structured Streaming,和之前的很不同,功能更强大,效率更高,跟其他的组件整合性也更好. 连续应用程序c ...

  4. 关于softnet的加密硬件狗 也就是所谓的赛孚耐

    SuperDog-R-2.2.1.iso 上面那个文件就是光盘里面的东西.你买了他们的产品 自然后带着这个玩意. 按照默认路径安装一下. 安装完毕如下图:

  5. Apple Pay编程指导

    1.About Apple PayApple Pay是一种移动支付技术,让使用者把它们对真实的物品和服务的支付信息以一种方便和安全的方式给你. 对于在app中给出的数字物品和服务,可查看In-App ...

  6. Delphi APP 開發入門(三)簡易計算機

    Delphi APP 開發入門(三)簡易計算機 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:68 ...

  7. vue生命周期探究(二)

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

  8. CodeChef - COUNTARI Arithmetic Progressions (FFT)

    题意:求一个序列中,有多少三元组$(i,j,k)i<j<k $ 满足\(A_i + A_k = 2*A_i\) 构成等差数列. https://www.cnblogs.com/xiuwen ...

  9. python将一些朋友的姓名存储在一个列表中,访问该列表中的每个元素,从而将每个朋友的姓名都打印出来

    """ 3-1 姓名: 将一些朋友的姓名存储在一个列表中,并将其命名为 names . 依次访问该列表中的每个元素,从而将每个朋友的姓名都打印出来. "&quo ...

  10. servlet的总结

    tomcat在启动的时候 加载webapp下面的web.xml,加载里面定义的servlet. web.xml文件有两部分:servlet类定义和servlet映射定义每个被载入的servlet类都有 ...