Question

我正在尝试根据显示器的大小自动调整横幅的大小。

这是当前代码：

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    height: 100%;
    background: #0b0b0b url({resource="settings/header_bg.png" app="core" location="global"}) no-repeat scroll center top;
    margin: 0;

我尝试了一些不同的尝试，但到目前为止都没有奏效。

我如何完成此任务？

Answer 1

使用100％宽度的背景尺寸。根据您页面的高度，封面可能会太高

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    height: 100%;
    background: #0b0b0b url(http://www.placekitten.com/1900/500) no-repeat scroll center top;
    background-size: 100% auto;
    margin: 0;}

编辑：100％将使图像全屏显示，因此它会根据设备/屏幕“自动调整大小”。自动设置高度值可以保留图像的长宽比，因为您可能不希望将其全部拉长吗？但这确实意味着当您扩大窗口范围时，图像将变得更高。

还应注意，将标题横幅作为背景图像放置在body标签上有点不寻常。在大多数情况下，人们将标题图片放在div标签中。这样一来，您就可以根据需要在div上设置一个固定像素高度，而不是整个页面的高度，然后如果需要的话就可以裁剪图像的一部分。

就像其他人指出的那样，实际上并不清楚您要做什么，更多的解释会有所帮助。

Answer 2

背景尺寸：封面调整背景图像的大小以覆盖整个身体，但是图像可能会被拉伸或剪切。

background-size：包含调整背景图片的大小，以确保该图片完全可见。

body, html {
    height: 100%;
}
body {
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    line-height: 1.3846;  /*18px*/
    color: #fff;
    margin: 0;
    background-color: #0b0b0b;
    background-image: url({resource="settings/header_bg.png" app="core" location="global"});
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

请注意，主体中的第一个子容器的最小高度为100％，以启用垂直滚动。

<body>
  <div style="min-height:100%;">
    YOUR PAGE
  </div>
</body>

使横幅自动调整大小（CSS）

2 个答案: