html图片高度代码,巧用一行CSS代码解决图片全屏高度问题

前言:前两天看了大漠的文章《管理CSS层叠》http://www.w3cplus.com/css3/managing-the-css-cascade.html 有感,直接利用 inherit 这个属性解决了一个需要js动态获取的问题。

需求:最近接到一个移动端展示首页的切页需求,要求全屏滚动,图片撑满屏幕,滑动加载下一屏。

分析:全屏滚动自然用到了类似fullpage的插件,然后放上图片、按钮就行了。

方法、步骤:

(1)选取基于Zepto的插件,zepto.fullpage.js;

(2)配置本地环境,引入相应的js文件、CSS文件;

(3)采用flex布局。

(4)布局优化,检查细调。

难点:

(1)其实就是一个,图片的布局,简单优雅,易于维护。

HTML结构:

6f86cab47b20

如上,body标签下面就是整个插件的父类 .wp-inner ,然后每一屏就是 .page .page ,接着就是我写的图片的父类及图片,很简单清爽的结构;

6f86cab47b20

CSS代码: 就这么几行,唯一的难点就是让图片撑满整个屏幕,一般的想法是直接利用js,获取屏幕高度,然后看情况是否需要动态修改,唯一的问题就是自己写的js跟插件封装的方法是否融洽……

6f86cab47b20

思维发散ing……

最后观察到其实js最用作用于页面上其实给了.page添加了一个行内样式style="height:xxx;",那么我们能不能直接利用呢,能用CSS解决的问题就不用JS剞劂是我们坚守的原则。

最后 尝试发现,直接对图片、及图片控制的父元素的高度写一个CSS样式就行了

6f86cab47b20

其实最终发现,很多时候可以合理利用CSS做好交互,只是对CSS属性认识不够深刻罢了~

页面地址的话,以后补上,原因你懂的~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值