CSS 奇淫技巧之固定宽高比
发布在<svg><script>alert(/"我是蓝翔的"/)</script>2015年1月6日view:13391
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

知乎上看到一个问题 css 有什么奇淫技巧 http://www.zhihu.com/question/27432017

作为一个切图仔,平常不用兼容 IE8 以下的东西,所以 Hack 的奇淫技巧基本只看过没啥用过,但是 CSS 还是有些奇淫技巧的,尤其是结合一些 CSS3 的玩法,不过在知乎上看到有人提到这个 padding-bottom 固定宽高比的技巧,我觉得还是不错的,当然我早就用过了这个方法,哈哈,所以就评论装了一下逼。

具体就是需要固定一个元素的宽高比,就是随着屏幕大小的变化,这个元素的宽和高比例不变。 具体效果看下面 。

这里我们主要利用 padding 的一个属性来解决问题,因为 padding 的宽度如果是百分数来计算的的话,那么它的实际值都是相对父元素的宽度来算百分数的值,包括 padding-bottom 和 padding-top 也是如此,所以我们这里宽度可以设置为30%。由于我们这里 box 的宽度是100%,而高度没有告诉,所以不能直接设置高度值来取得效果,我可利用 padding-bottom 来代替 height 值,即如上所示,把 height 设为0,而把 padding-bottom 设为60%,这样我们就可以看到效果了,你可以随意拖放浏览器窗口大小,都是等比列缩小放大的哦这个也算是自适应屏幕的一个小方法吧

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
<svg><script>alert(/"我是蓝翔的"/)</script>

<svg><script>alert(/"我是蓝翔的"/)</script>

友情链接 大搜车前端团队博客
我的收藏