对背景图片设置属性: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. php自动读取文件夹下所有图片

    $path = 'xxxxx';///当前目录$handle = opendir($path); //当前目录while (false !== ($file = readdir($handle))) ...

  2. python实现网页登录时的rsa加密流程

    对某些网站的登录包进行抓包时发现,客户端对用户名进行了加密,然后传给服务器进行校验. 使用chrome调试功能断点调试,发现网站用javascript对用户名做了rsa加密. 为了实现网站的自动登录, ...

  3. 计算机二级-C语言-对结构体数据进行求平均值。对结构体数据进行比较处理。

    //函数fun的功能是:计算形参x所指数组中N个数的平均值(规定所有数均为正数),作为函数返回,并将大于平均值的数放在形参y所指数组中,在主函数中输出. //重难点:对结构体数据进行求平均值. #in ...

  4. SQL 层级数据查询出树形状态

    WITH TEST AS (SELECT  DEPTID,PARENTDEPT,SORTORDER,1 SPAC,CONVERT(CHAR(200),RTRIM(DEPTID)+CONVERT(CHA ...

  5. VS中使用C的一些函数报错的问题

    VS建议采用带_s的函数,如scanf_s.strcpy_s,但这些并不是标准C函数. 要想继续使用此函数,需要在源文件中添加以下指令就可以避免这个错误提示: #define _CRT_SECURE_ ...

  6. 《Airbnb 早期BP》---创业学习--训练营直播第3课--HHR

    1,Airbnb:300亿美金. 一,BP 价值: 1,优秀的BP原则: (1)UCD原则:user centered design,用户为中心的设计.站在投资人视角,回答最关心的问题. (2)清晰原 ...

  7. P3376 【模板】网络最大流 dinic详解

    dinic的核心在于分层和多路增广. 分层的意思是,对于图用bfs搜出每一层,避免出现dfs深度过深的情况. 多路增广,利用的是dfs的回溯性质,这样就可以在一个点增广出它的所有流量. #includ ...

  8. IOS XE-show memory

    有些时候,我们可能会遇到IOS XE设备的high memory的情况.我们可以使用的命令去查看相关信息. 例如: Router# show version Router# show memory R ...

  9. java之中文乱码处理

    有些时候,比如文件操作的时候,特别是文件中有中文,会规定用GBK格式,这时读写文件,可能会出现中文乱码 资源文件乱码 文件内容乱码 资源文件乱码: 解决: PropertiesUtil proper ...

  10. 大数据篇:MapReduce

    MapReduce MapReduce是什么? MapReduce源自于Google发表于2004年12月的MapReduce论文,是面向大数据并行处理的计算模型.框架和平台,而Hadoop MapR ...