回到顶部
我的头像

RedSpite

纯css响应式图片尺寸比例固定

这段时间公司官网首页翻版,尝试了一直没写过的响应式布局,就这段时间写的几个响应式网页来看啊,bootstrap用得最多的就是12栅格布局了吧~

以前一直觉得页面的每一个代码都要自己手敲,现在倒是觉得自己傻了。。。

不扯闲话,响应式页面让人头疼的是图片大小怎么弄。

当能用的图片是从第三方引过来,我们不能控制图片的尺寸,而且图片大小还不能写成定值的时候,似乎只剩用js动态写一条路了,初期的我也是用了这个方法。

可是js写第一太麻烦不灵活,window.resize每次窗口缩放都要 运行一边代码,无疑这加重了浏览器负担。二是就算js写也是定值像素,图片会被压缩变形。

所幸找到用 纯css就能实现, 图片在响应式布局里,能保持规定尺寸比例 的方法,如下:

配图测试

原比例约为5:3,展示为1:1

Html:
                     
配图测试
Css:
                    #imgbox{
                        width: 30%;             /*图片宽度比例*/
                        padding-bottom: 30%;    /*图片高度比例*/
                        height: 0;
                        overflow: hidden;
                    }
                    #imgbox img{
                        min-width:100%;
                    }
                

2016.09.21

© RedSpite | 蜀ICP备16004270号