时间戳

首页 > 解决方案 > 制作横幅上下比例

html - 制作横幅上下比例

问题描述

我无法让我的横幅在我的网页上上下缩放以始终适合用户的屏幕，所以我没有水平滚动条，这在手机和台式机上也是糟糕的体验。这是代码：

<!DOCTYPE html>
<html>

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">      
      <style type="text/css">
      body {
              background-image: url("TBG_02.jpg");
              background-color: #cccccc;
              background-size: cover;
              background-repeat: no-repeat;
           }
        #top,#bottom{width:100%;}
        #top,#bottom{height:155px;}
        #top{position: fixed;left:0;top:0;}
        #bottom{position: fixed;right:0;bottom:0;}
        .topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
        .bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
      </style>
</head>

<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>   
</body>

这就是问题的样子：

https://imgur.com/a/WscYr3D

您可能还会注意到照片中的灰色/白色空间不好。注意：我将添加一些图像作为横幅上方的按钮。有任何想法吗？

标签： htmlcss

解决方案

您的方法在使用方面基本上是合理的：

background-size: cover;

以确保浏览器调整图像大小以覆盖整个<body>.

但是，您缺少的是身体的高度并没有覆盖视口的整个高度。

要解决此问题，您可以添加：

body {min-height: 100vh;}

IE。 身体的高度不得小于视口高度的 100%（或 100 个视口高度单位）。

工作示例：

body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
         
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}

.top{
top: 0;
left: 0;
}

.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>

推荐阅读