思路:图片不要设置为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. Linux命令(基础1)

    一  命令的基本构成 (PS:Linux发行版本命令大概有200多个,熟练掌握个百八的就行了,其余的有个大概了解) 命令体 选项 参数(对象) ls -l /var 1.1参数:文件 文件类型: d ...

  2. SonarQube+jenkins+maven平台搭建

    SonarQube代码质量管理 1.配置jdk和maven jenkins - 系统管理 - 全局工具配置 jdk安装: # which java# /usr/local/java/jdk1.8.0. ...

  3. 004-Shell 基本运算符、算术运算符、关系运算符、布尔运算符、辑运算符、字符串运算符、文件测试运算符

    一.概述 Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 二.算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命 ...

  4. JSP页面实现自动跳转!

    JSP页面实现自动跳转!一.页面自动刷新: 把如下代码加入<head>区域中<meta http-equiv=”refresh” content=”5″>注:content=” ...

  5. Oracle数据库查找持有锁的SQL语句,而不是请求锁的SQL语句(原创)

    Oracle数据库查找持有锁的SQL语句,而不是请求锁的SQL语句 查找活动的事务以及活动事务关联的会话信息 select s.sid 会话ID, s.serial# 会话序列号, s.usernam ...

  6. usr/bin/ld: cannot find 错误解决方法和 /etc/ld.so.conf

    我makefile出现这个错误: HelloWorldServer.c:(.text+0xaa): undefined reference to `zmq_send'collect2: error: ...

  7. 我与前端之间不得说的三天两夜之css基础

    前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... ...

  8. HDU 1532 Drainage Ditches(网络流模板题)

    题目大意:就是由于下大雨的时候约翰的农场就会被雨水给淹没,无奈下约翰不得不修建水沟,而且是网络水沟,并且聪明的约翰还控制了水的流速, 本题就是让你求出最大流速,无疑要运用到求最大流了.题中m为水沟数, ...

  9. python 时间和时间戳的转换

    对于时间数据,如2016-05-05 20:28:54,有时需要与时间戳进行相互的运算,此时就需要对两种形式进行转换,在Python中,转换时需要用到time模块,具体的操作有如下的几种: 将时间转换 ...

  10. 性能调优之MySQL篇四:MySQL配置定位以及优化

    一.CPU最大性能模式 cpu利用特点 5.1 最高可用4个核 5.5 最高可用24核 5.6 最高可用64核心 一次query对应一个逻辑CPU 你仔细检查的话,有些服务器上会有的一个有趣的现象:你 ...