不同屏幕分辨率下大图片始终居中显示主体部分

SJY发表于:2018年06月06日 12:14 • 阅读:

现在电脑显示屏尺寸差异越来越大,屏幕分辨率大多在1024*768到1920*1080之间,这给我们前端开发者带来了不少挑战。
很多大气的网站,一般都会有一张超大的图片横跨整个屏幕,最常见的1920宽的图片,在1920*1080的屏幕分辨率下当然可以完美呈现,但是在其他诸如1024*768、1366*768的屏幕分辨率下又会呈现怎样的效果呢?
无意间看到华为的官方网站,无论在什么屏幕分辨率下,或者在不同的窗口大小下,那张1920的超宽大图,始终居中显示主体部分。对!这就是我们今天要完成的作业,要的就是这种效果!
方案一 负值+定位

img{width:1920px; margin-left:-960px;position:relative;left:50%;}

就是这么简单的一行代码,图片总宽度为1920px,向左移动一半,即960px,屏幕上只显示右半部分图片,然后通过绝对定位或相对定位,距离浏览器左边50%的宽度,变相的显示了图片居中主体部分。先去掉position:relative;left:50%;当浏览器窗口小于1920px时,显示的仍然是右半部分图片,因为向左移动的是实际的像素,而非百分比,所以不会因为浏览器窗口大小的改变而改变图片的呈现方式。再加上position:relative;left:50%;意思为这一半的图片向右移动浏览器窗口的50%,这就实现了浏览器窗口只显示图片的中间部分。
优点:
代码简单,纯CSS搞定
缺点:
只适合一屏的页面,当页面超过一屏浏览器右侧就会出现滚动条,也就是说在1920的屏幕分辨率下,一旦出现滚动条,实际宽度还要减去滚动条的宽度,那么这张1920的图片就会撑破这个宽度,导致在全屏状态下,也会出现横向滚动条,影响美观。
跟第一条缺点相同的原理,当浏览器窗口小于1920px时,因为图片是固定宽度,所以图片的右边部分必须完整显示,这样就导致了横向滚动条的出现。
参考文献 纯css实现超宽图片全屏居中

方案二 jQuery完美搞定

$(function(){        
        Resize = function(){
    var winW=$(window).width();//获取窗口宽度
        if (winW < 980) //当窗口宽度小于980时,就等于980
        winW = 980;
        var imgW = 1920;//图片宽度为1920
        var left = (winW - imgW) / 2;//左边距离为 窗口宽度-图片宽度的差除以2,这么做,只要向左移动这个结果值,就能呈现图片居中主体部分内容
        $('.banner img').css({//设置banner容器下的图片的CSS,相对定位,向左移动上面计算出的left的值
                                'left': left + 'px',
                'position': 'relative'
            });
        $('.banner').css({//设置容易banner的宽度为窗口宽度,溢出部分隐藏,这样当窗口比较小时,也不会出现横向滚动条,当然当窗口小于980时,还是会显示,因为上面设置了窗口最小宽度只能为980
                                'overflow': 'hidden',
                'position': 'relative'
            }).width(winW);
                        
        }
window.onresize = function(){//当窗口重设大小时,执行上面定义的函数
        Resize();
}
window.onload = function(){//当刷新页面时,执行上面定义的函数
        Resize();
}
});

参考文献 如何设置css强制不显示滚动条,当且仅当浏览器窗口缩小到1000px时才显示滚动条
javascript(window.onresize)事件获取窗口大小
参考了华为官方的代码

HuaWei.page.autoMaxWidth = function(){

    var winW = $(window).width();
    if (winW < 980) 
        winW = 980;
    
    $('.autoMaxWidth').each(function(){
        $(this).width(winW);
        
        var $img = $('img', this).first();
                
        var imgW = $img.width() || 1920;
        var left = (winW - imgW) / 2;
        $img.css({ "left": left + "px", "position": "relative" });
        
        if ($.browser.msie && parseInt($.browser.version) == 6) {
            $(this).css({
                'overflow': 'hidden',
                'position': 'relative'
            }).width(winW);
            $('#banner').css({
                'overflow': 'hidden',
                'position': 'relative'
            }).width(winW);
        }
        
    });
}


 

欢迎转载,但请保留原文地址 http://www.sjyhome.com/articles/1390.html

回复(0)