网页头部图片自适应

最新推荐文章于 2023-08-23 15:02:17 发布

辣姐什么鬼

最新推荐文章于 2023-08-23 15:02:17 发布

阅读量6.9k

点赞数 1

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52638476

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

就我目前接触到的头部图片PSD设计图里基本都是铺满的，实现的时候就会考虑到底怎么呈现

一种想法是永远显示整张图片铺满屏幕宽度高度自适应；

另一种想法是图片大小固定永远居中显示并根据浏览器可视区域宽度对图片显示哪些部分进行设置

当然，曾经问过前辈，得到答案是如果图片宽度小于浏览器可视区域宽度对多出部分可以用1px的切片平铺

下面总结下前两种

1、拖动浏览器窗口改变其大小，图片也跟着放大缩小

如图：

可以看到窗口大小不同头部图片尺寸改变

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #topImg{
            width:100%;
            background:url(banner.jpg) no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div id="topImg"></div>
<script>
    window.onload= function () {
        var screenW=document.body.clientWidth;
        var ratio=screenW/1766;
        var img=document.getElementById("topImg");
        img.style.height=ratio*635+"px";
        window.onresize= function () {
            screenW=document.body.clientWidth;
            ratio=screenW/1766;
            img.style.height=ratio*635+"px";
        }
    }
</script>
</body>
</html>

其中有用到onresize就是当拖动浏览器窗口对其进行缩放时触发下面的操作

第二种想法源于昨天做的一个网页，头部不光有图片还有文字而且文字在图片中的一个方框显示，以前我可能是直接截整张图包括文字，但同事说过如果要改图片上的文字难道还要重新截图吗，这种情况，所以文字尽量代码实现不要截图。

效果图：

如图拖动窗口缩放图片显示部分也跟着改变，里面文字部分一直在黄色框里

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #topImg{
            height:635px;
            background:url(banner.jpg) no-repeat;
            position:relative;
            margin:0 auto;
        }
        .bannerText1{
            font-size:34px;
            color:#000000;
            position:absolute;
            top:336px;
        }
    </style>
</head>
<body>
<div id="topImg">
    <p class="bannerText1" id="text">车辆价格大降价，最高直降<span>20000</span>元</p>
</div>
<script>
    window.onload= function () {
        var screenW=document.body.clientWidth;
        var ratio=Math.floor((screenW-1766)/2);
        var img=document.getElementById("topImg");
        var text=document.getElementById("text");
        img.style.backgroundPosition=ratio+"px";
        text.style.left=536+ratio+"px";
        window.onresize= function () {
            screenW=document.body.clientWidth;
            ratio=Math.floor((screenW-1766)/2);
            img.style.backgroundPosition=ratio+"px";
            text.style.left=536+ratio+"px";
        }
    }
</script>
</body>
</html>

里面有用到背景图片的background-position属性

辣姐什么鬼

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页头部图片自适应

就我目前接触到的头部图片PSD设计图里基本都是铺满的，实现的时候就会考虑到底怎么呈现一种想法是永远显示整张图片铺满屏幕宽度高度自适应；另一种想法是图片大小固定永远居中显示并根据浏览器可视区域宽度对图片显示哪些部分进行设置当然，曾经问过前辈，得到答案是如果图片宽度小于浏览器可视区域宽度对多出部分可以用1px的切片平铺下面总结下前两种1、拖动浏览器窗口改变其大小，图片也跟着放大缩...
复制链接

扫一扫