对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。

background-size有3个属性:

    auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。

    cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。

    contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。

div背景图片自适应的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  3. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  4. 背景图片自适应整个页面CSS+DIV

    <body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...

  5. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  6. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  7. div背景图片或颜色不显示的解决办法

    背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)D ...

  8. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  9. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

随机推荐

  1. 吴裕雄 python 神经网络——TensorFlow 使用卷积神经网络训练和预测MNIST手写数据集

    import tensorflow as tf import numpy as np from tensorflow.examples.tutorials.mnist import input_dat ...

  2. 消息队列(四)--- RocketMQ-消息发送2

    概述   接着我们上一篇继续分析消息发送,上节讲到消息发送前有可能遇到 broker 失效的情况,RocketMQ 主要是采用两种策略 : 重试发送 broker 故障延迟机制   后者指的是当发送给 ...

  3. dp(小猪存钱罐)

                      B - Piggy-Bank 在acm能够做任何事情之前, 必须编制预算并获得必要的财政支持.这一行动的主要收入来自IBM.这个想法其实很简单,每当一些会员有一点小 ...

  4. python 爬取图片

    使用python的requests库爬取网页时,获取文本一般使用text方法,如果要获取图片并保存要用content 举个栗子,爬煎蛋网的图: #!/usr/bin/env python #-*- c ...

  5. C语言:有序递增链表的插入问题。

    //已建立一个带头节点的单向链表,链表中的各结点按结点数据域中的数据递增有序连接.fun函数:把形参x的值放入一个新结点并插入链表中,使插入的各个数据域的数据仍保持递增有序. #include < ...

  6. leetCode练题——27. Remove Element

    1.题目 27. Remove Element——Easy Given an array nums and a value val, remove all instances of that valu ...

  7. 控制面保护(CPPr)

    除了CoPP外,管理员还可以通过使用控制面保护(Control Plane Protection,CPPr)机制抵御针对控制面的攻击,从本质上讲,CPPr属于CoPP的扩展,在CPPr中控制面接口被划 ...

  8. jquery 分页 Ajax异步

    //使用Ajax异步查询数据 <div class="table-responsive"> <table class="table table-bord ...

  9. 一、json与jsonp的使用

    1.json与jsonp的引入    在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域.    备注:跨域也可以通过服务器端代理来解决;    理解:JSON是一种数据交换格式,而J ...

  10. javaweb项目中web.xml配置文件的/和/*的区别

    1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截了所有的请求.同时对*.js,*.jpg等静态文件的访问也就 ...