纯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号