思路:图片不要设置为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. Java集合—集合框架

    前言 在Java语言中,Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(具体实现接口的类).所有抽象出来的数据结构和操作(算法)统称为Java集合框架(JavaCollectio ...

  2. Using Bluetooth LE with Go (Golang)

    Using Bluetooth LE with Go (Golang)  Gatt is a Go package, which provides developers to create BLE a ...

  3. Mac 升级 OpenSSL

    [转载自 https://blog.csdn.net/focusjava/article/details/51179297 ] [升级Mac的openssl] 终端下 openssl version ...

  4. HDU1520:Anniversary party(树形dp第一发)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1520 一个公司去参加宴会,要求去的人不能有直接领导关系,给出每一个人的欢乐值,和L K代表K是L的直接领导 ...

  5. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  6. [C语言](*p)++ 与 *p++ 与 ++*p 拨开一团迷雾

    环境:win7 IDE:DEV-C++ 编译器:GCC 1.先说++i和i++的基础 代码如下: #include <stdio.h> //just change simple void ...

  7. Leetcode 357

    没用过Leetcode刷题,只能按照自己的想法随便写写了 思路:1.第一位数有9种(除了0)可能,第二位数有9种(除了第一位)可能,第三位数有8种(除了前两位)可能,以此类推...9*8*7*...( ...

  8. 264. Ugly Number II(丑数 剑指offer 34)

    Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...

  9. tomcat源码调试2

    前面对tomcat做了一些简单的认识,下面将tomcat源码调试环境搭建起来. 可以参考官网的搭建方法,这里是按照网上的maven管理的方式搭建. 大概步骤是: 1.下载tomcat 9的源码,一般是 ...

  10. Linux 实时性能测试工具——Cyclictest

    Cyclictest 是 rt-tests 下的一个测试工具,也是rt-tests 下使用最广泛的测试工具,一般主要用来测试使用内核的延迟,从而判断内核的实时性. 1.2 cyclictest 安装 ...