思路:图片不要设置为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. VC2005 warning C4819 消除方法

    一. Warning C4819:The file contains a character that can ot be represented in the current code page(9 ...

  2. Python数据分析(一):工具的简单使用

    1.Numpy 安装:pip install numpy [root@kvm work]# cat numpy_test.py #!/usr/bin/env python #coding:utf-8 ...

  3. mysql复习-来源考试

    mysql复习-   No1 .登录和权限 (一)常用命令1.登录mysqlmysql -h localhost -u root -p 2.重启mysqlservice mysql restart 延 ...

  4. HDU1087:Super Jumping! Jumping! Jumping!(简单dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1087 水题,可是我却因为dp数组的初始化造成了多遍wa,这题就是求上升序列的最大和. 转移方程: 首先要对 ...

  5. 【IO】- 关于ByteBuffer的一点认识

    我们经常使用ByteBuffer. 通俗的Non-DerictedByteBuffer结构如下 HeapByteBuffer extends ByteBuffer { Byte[] array; in ...

  6. Linux mount Windows目录

    [问题描述] Windows 机器192.168.1.103共享了 /share/yasi 目录,并且赋予了写的权限,在Windows机器下可以用 yasi/pass 登录.在一台CentOS 6.3 ...

  7. 国内NLP的那些人那些会

    统计学和语言学专家都列在一起了,没有区分.1,黄昌宁,1937年生于广东,1955年考入清华大学电机系,1961年毕业并留校任教至博士生导师, 1983-1984年赴美国耶鲁大学进修,1986-198 ...

  8. python字符串的操作(去掉空格strip(),切片,查找,连接join(),分割split(),转换首字母大写, 转换字母大小写...)

    #可变变量:list, 字典#不可变变量:元祖,字符串字符串的操作(去掉空格, 切片, 查找, 连接, 分割, 转换首字母大写, 转换字母大小写, 判断是否是数字字母, 成员运算符(in / not ...

  9. 使用 Task 简化异步编程

    .Net 传统异步编程概述 .NET Framework 提供以下两种执行 I/O 绑定和计算绑定异步操作的标准模式: 异步编程模型 (APM),在该模型中异步操作由一对 Begin/End 方法(如 ...

  10. day6-面向对象

    Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...