.Head{
background-image: url("../../Img/PersonalCenter/banner.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: calc(41vw + 25px);
background-color:white;
text-align:center;
}

  

描述 背景图片高313px 宽750px,高宽占比约为41%

元素为了能够让背景宽度100% 高度自适应且高度为完全显示背景图片后多余25像素显示其他内容。特地设置Head的高度为 calc(41vw + 25px) 41vw 为屏幕像素宽度的41%

 

效果:

记一则css3计算的更多相关文章

  1. css3计算属性(calc)

    如果有固定头部高度和底部高度,内容的高度或者宽度想要根据浏览器屏幕自适应的话,可以用到css3的计算属性,即calc. 用法如下: 内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽) ...

  2. css3 vw -----解决页面滚动出现跳动的bug

    100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度. demo: h1{font-size:8vw;} ...

  3. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  4. Oracle 哈希连接原理

    <基于Oracle的sql优化>里关于哈希连接的原理介绍如下: 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集的表连接方法. 在Oracle 7.3 ...

  5. 【体系结构】动态调度算法:记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  6. Front End Developer Questions 前端开发人员问题(二)CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  7. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  8. [No00000F]Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全

    一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或 ...

  9. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

随机推荐

  1. 【剑指offer】05替换空格,C++实现

    1.题目 # 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy.  2.思路 # 从头到尾遍历字 ...

  2. 【排序】归并排序,C++实现

    原创文章,转载请注明出处! 博客文章索引地址 博客文章中代码的github地址 # 基本思想(分治法)       归并排序中, “归”代表递归的意思,即递归的将数组通过折半的方式分离为单个数组. “ ...

  3. bzoj 2850 巧克力王国

    bzoj 2850 巧克力王国 钱限题.题面可以看这里. 显然 \(x\) \(y\) 可以看成坐标平面上的两维,蛋糕可以在坐标平面上表示为 \((x,y)\) ,权值为 \(h\) .用 \(kd- ...

  4. Quartz 2D编程指南(5) - 变换(Transforms)

    Quartz 2D 绘制模型定义了两种独立的坐标空间:用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率).用户坐标空间用浮点数表示坐标,与设备空间的像素分辨率没有关系.当我们需要一个点或 ...

  5. 重温CLR(十一) 枚举类型、位标志和数组

    枚举类型 枚举类型(enumerated types)定义了一组"符号名称/值"配对.例如,以下Color类型定义了一组符号,每个符号都标识一种颜色: internal enum ...

  6. 《DSP using MATLAB》示例Example8.2

    代码: N = 3; OmegaC = 0.5; % Direct form [b, a] = u_buttap(N, OmegaC); [C, B, A] = sdir2cas(b, a) 运行结果 ...

  7. LeetCode 417. Pacific Atlantic Water Flow

    原题链接在这里:https://leetcode.com/problems/pacific-atlantic-water-flow/description/ 题目: Given an m x n ma ...

  8. 如何优雅的使用RabbitMQ(转)

    RabbitMQ无疑是目前最流行的消息队列之一,对各种语言环境的支持也很丰富,作为一个.NET developer有必要学习和了解这一工具.消息队列的使用场景大概有3种: 1.系统集成,分布式系统的设 ...

  9. Mysql 5.7初始化密码

    一.MAC Mysql安装 1.下载dmg安装 从http://dev.mysql.com/downloads/mysql/下载dmg安装 二.Mysql密码修改 1.通过mysql -uroot - ...

  10. ecmall类关系图(转)