图片自适应和footer的定位方式

34 篇文章 0 订阅
4 篇文章 0 订阅

前言

实际项目中,关于页面的方面经常会碰到几个让人头疼的问题。举个栗子:图片自适应问题;底部footer究竟该怎样定位才能保证不管主体部分内容多少,都要能够放在最下面的理想位置。

图片大小自适应

一般而言,网站为了布局优美,放置图片的方框都是固定大小的容器(防止数据库中的图片大小和容器大小相差太大,影响布局)。

根据图片大小和容器大小的比较,分为4类:

1、前两类 图片高度 < 容器高度 && 图片宽度 < 容器宽度 || 图片高度 > 容器高度 && 图片宽度 > 容器宽度
解决方案:设置图片宽高都是父容器的100%。

2、图片高度 < 容器高度 && 图片宽度 > 容器宽度
解决方案:设置图片高度都是父容器的100%,宽度自适应(auto)。

3、图片高度 > 容器高度 && 图片宽度 < 容器宽度
解决方案:设置图片宽度都是父容器的100%,高度自适应(auto)。

具体实施可以参照下面:

    <script >
            function initImg(rollimg){
                var pHeight = $(rollimg).parent().height();
                var pWidth = $(rollimg).parent().width();
                console.log(pHeight + ',' + pWidth );
                $(rollimg).css("width","100%");
//          $(rollimg).css("height","100%");

                var imgHeight = $(rollimg).height();
                var imgWidth = $(rollimg).width();
                console.log("imgHeight:"+imgHeight);
                if(imgHeight < pHeight){
                    $(rollimg).removeAttr("style").css({"height":"100%"});
                }
                if(imgHeight < pHeight && imgWidth > pWidth){
                    $(rollimg).removeAttr("style").css({"height":"100%"}).css("width","auto");
                }
            }
            //图片自适应
            window.onload=function(){
                $.each($(".rollimg"),function(i,rollimg){
                    if(rollimg.complete){
                        console.log("从缓存中获取");
                        initImg(rollimg);
                    }else{
                        $(this).load(function(){
                            console.log("从服务器中获取");
                            initImg(rollimg);
                        });
                    }
                });
            };
        </script>

关于footer的定位

这里写图片描述
使用 position:absolute/fixed/relative; 或者让主体部分的内容自动把footer撑起到下面都不能保证在各种环境下显示正常,都存在问题。
position:absolute;一旦主体内容特别多,大于clientHeihgt,底部footer就会遮住主体内容。
position:fixed/relative;或者让主体部分的内容自动把footer撑起到下面。一旦主体内容特别少,小于clientHeihgt,底部footer就会跑到这面来很难看。
解决方案:几种定位方式灵活使用,配合jq判断页面内容高度和浏览器高度的比较。

具体实施可以参照下面:

<script>
            $(function () {
                function initFooter(){
                    var height = $("header").height() + $(".main-bgImg").height() + $("footer").outerHeight();
                    //console.log($("header").height()+","+$(".all-info-con").height()+","+$("footer").outerHeight());
                    //console.log("窗口高度:"+$(window).height()+","+"总高度:"+height);
                    heightRsize();
                    $(window).resize(function(){
                        heightRsize();
                    });

                    //内容过少时footer自动到底部
                    function heightRsize(){
                        if($(window).height() > height){
                            $("footer").css({"position":"absolute","width":"100%","bottom":"0"})
                        }else{
                            $("footer").removeAttr("style");
                        }
                    }

                }
                initFooter();
            })

    </script>

总结

这两个问题几乎每个项目都会遇到,而解决方法因人而异,大概拥有几年前端经验的人也会对这两个问题比较烦心吧。如果您有更好的方法,欢迎留言交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值