思路:图片不要设置为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. python一两行代码完成的骚操作

    分享一个前几天晚上粉丝问的问题,觉得很实用的一个问题,用python读取Excel并保存字典,如何做? 下面是该同学问题截图和代码 ​ 代码截图是下面这样的 ​ 不知道大家第一眼看了这个代码,什么感受 ...

  2. redis的客户端medis

    medis是用js写的redis客户端工具,界面很好用,也很有用.点击这里可以下载到mac下的软件包. 下面是截图:         完结.

  3. jquery Chosen使用

    1,首先去http://harvesthq.github.io/chosen/下载插件. 2,在网页中加入下面的文件. <link rel="stylesheet" href ...

  4. Spark应用提交

    在 Spark 的 bin 目录中的 spark-submit 脚本用与在集群上启动应用程序.它可以通过一个统一的接口使用所有 Spark 支持的 Cluster Manager,所以您不需要专门的为 ...

  5. 从原型链看DOM--Element类型

    Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...

  6. UVA10020:Minimal coverage(最小区间覆盖)

    题目: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/M 题目需求:数轴上有n个闭区间[ai,bi],选择尽量 ...

  7. (转)Spring整合Jpa

    Spring-data-jpa 学习笔记(一) 作者:zeng1994  出处:http://www.cnblogs.com/zeng1994/ Spring家族越来越强大,作为一名javaWeb开发 ...

  8. 压力测试工具MySQL mysqlslap

    MySQL mysqlslap压测 2016-09-12 17:49 by pursuer.chen, 771 阅读, 0 评论, 收藏, 编辑 介绍 mysqlslap是mysql自带的一个性能压测 ...

  9. 网站实时信息采集和统计graphite

    Graphite 是一个Python写的web应用,采用django框架,Graphite用来进行收集服务器所有的即时状态,用户请求信息,Memcached命中率,RabbitMQ消息服务器的状态,U ...

  10. 4. MySQL必知必会之排序检索数据-ORDER BY

    本章将讲授如何使用SELECT语句的ORDER BY子句,根据需要排序检 索出的数据. 1. 排序数据