主机格调

网页布局里很多地方需要宽高等比缩放功能,例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化,高度自适应,这样才不会让轮播里面的图片压缩变形,顶多就是放太大而变模糊。

之前同事的办法,是用一个透明的图片占位符,此图片的大小是需要的比例。例如2:1就把占位符做成2px*1px,例如5:3就把占位符做成5px*3px。然后放入img标签里,设置宽度100%,这样高度就自动撑开,进而撑开外层父div。img平级放个子div,相对父div绝对定位,宽高100%,这样子div的大小就和img一样大,实现等比缩放了。见→DEMO←方法1(建议缩小窗口查看效果)。

图片备用链接

但这个方法有个最大弊端,img标签的大小,得里面的图片占位符解析出来,才可以撑开父div。这就导致网页一打开时,父div高度为0,等到图片占位符解析完毕后,父div才得以撑开,所以网页会闪动,体验不好,也会影响js的计算模块高度等问题。

下面是群友提供的另外一种办法,利用padding取值百分比来做:垂直方向的padding取值使用百分比时,其值是相对于本模块的宽度(怪异模式盒子模型),而W3C的解释是:基于父对象总高度或宽度的百分比。大家看哪种好理解就理解哪个吧。提供一个→DEMO←大家看看这个有趣的现象(建议缩小窗口查看效果)。

根据padding的这个有趣现象,可以用伪类来撑开外层容器,轻松实现等比缩放模块、图片、背景图片、视频等,见→DEMO←方法2(建议缩小窗口查看效果)。

参考资料:

[老法新用]使用padding-top:(percentage)实现响应式背景图片

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

录gif图片工具:

http://www.cockos.com/licecap/

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/493.html