博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片高度不够一页,如何覆盖全屏
阅读量:4584 次
发布时间:2019-06-09

本文共 598 字,大约阅读时间需要 1 分钟。

现有页面,要求内容全部由图片撑开,但图片高度不够占据一整屏,如何在这种情况下,利用现有图片铺满全屏?

可以利用calc计算属性及百分比实现。具体实现如下:

设计稿按照iphone6尺寸标准,页面分2部分,头部header与内容区container,头部占用32px,因此内容区需占用635px,全屏才能被覆盖,通常container内容区是由container内的元素自动撑开的,不主动为其设置高度,但,

现有设计稿,内容区有两张图片做背景,sign2和sign3中分别有一张img标签,但这两张图片总高度为590+615=1205px不够手机端635px(等于设计稿1270px)无法自动撑开使container为635px铺满全屏,要实现占满全屏,则利用百分比计算如下,

利用计算属性calc强制为container设置高度为635px,再计算sign2和sign3内的两张图片各自所占的百分比,将图片撑开,占满container,例如:img1设计稿高度590px,img2设计稿高度615px,则img1所占比例为590/(590+615)约49%,折合到手机端实际高度635px*49%;img2所占比例为615/(590+615)约51%,折合到手机端实际高度635px*51%。

 

转载于:https://www.cnblogs.com/onlycare/p/9187122.html

你可能感兴趣的文章
TCP之listen&backlog
查看>>
实验室的毕业照
查看>>
核心编程答案(第六章)
查看>>
Spring 3.x jar 包详解 与 依赖关系
查看>>
java线程详解二
查看>>
maven项目导入依赖jar包并打包为可运行的jar包
查看>>
leecode第二十三题(合并K个排序链表)
查看>>
关于Eclipse的unsupported major minor version 51.0 错误
查看>>
2014年目标
查看>>
weblogic启动后 登陆控制台特别慢的问题
查看>>
Spring加载resource时classpath*:与classpath:的区别
查看>>
映射“DataAdapter.TableMappings”
查看>>
activity生命周期
查看>>
动画学习之Music图形绘制
查看>>
2019 2.15模拟赛
查看>>
基于H5 pushState实现无跳转页面刷新
查看>>
关于同余与模运算的总结
查看>>
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
查看>>
【转载】法线贴图Nomal mapping 原理
查看>>
prado 初步分析
查看>>