思路:图片不要设置为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. 16.遇到就jar mismatch! Fix your dependencies的问题

    这是因为两个项目的jar包(android-support-v4.jar)不一致. 解决方法是把2个jar都删除,然后各自加上最新的jar包 但是换了之后发现R文件编不出来,原因是minsdk的设置问 ...

  2. PAT 1052 Linked List Sorting [一般]

    1052 Linked List Sorting (25 分) A linked list consists of a series of structures, which are not nece ...

  3. PAT 1049 Counting Ones [难]

    1049 Counting Ones (30 分) The task is simple: given any positive integer N, you are supposed to coun ...

  4. Linux环境下Netstat与PS的使用

    Linux下用netstat查看网络状态.端口状态 在linux一般使用netstat 来查看系统端口使用情况步. netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实际 ...

  5. input 虚拟键盘

    if (!Element.prototype.scrollIntoViewIfNeeded) { Element.prototype.scrollIntoViewIfNeeded = function ...

  6. Ubuntu 14.04.5 imx6 开发环境搭建

    1,下载VMware Workstation虚拟机 地址:http://1.xp510.com:801/xp2011/VMware10.7z 2,下载Ubuntu 14.04.5 LTS 32位Ubu ...

  7. 查看ubuntu 各系统的内核版本

    1.查看ubuntu版本号:   cat  /etc/issue 返回结果: Ubuntu 16.04.2 LTS \n \l   2.查看内核版本号:   cat /proc/version 返回结 ...

  8. Oracle trunc()函数,decode()函数,substr函数,GREATEST函数,java中substring函数的用法

    --Oracle trunc()函数的用法/**************日期********************/1.select trunc(sysdate) from dual --2013- ...

  9. C++之条形码,windows下zint库的编译及应用(一)

    zint库是一个开源的第三方库,提供了生成条形码.二维码等功能.本文主要介绍zint库的生成及简单应用. 工具/原料   vs2012 代码文件下载   1 下载zint包 2 zint依赖另外两个库 ...

  10. PHP 日期格式中 Y与y

    大写Y效果: $nowtime = time(); $nowtime=date("Y-m-d",$nowtime); 结果: 2015-10-24 小写y效果: $nowtime ...