Question

这是我在这里的第一个问题，所以如果我没有完全掌握术语，我很抱歉。

我有一个背景图片，作为页脚信息的徽标分隔符，我做了2,400px宽，因此可以完全显示多个屏幕尺寸。唯一的问题是网页有一个较大的底部滚动条，我只是希望它约束到窗口宽度，并且显示更多，因为有人可能会将网页宽度调整为更大或更小，并且它限制为更小。我得到的最接近的是当它被限制在窗口的宽度时，但它扭曲了图像。

这是我目前正在使用的CSS，它可能包含相当多的多余元素，这些元素没有帮助我，我曾经搜索谷歌搜索解决方案，但却来到这里。

footer {
    overflow: hidden;
    background: url(../img/aperture_labs_bot.png) no-repeat fixed; 
    background-image: url(../img/aperture_labs_bot.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left; 
    background-size: 2400px 68px;
    background-size: cover;
    background-position: 50% 50%;

}

Answer 1

试试这个：

Range("A23").Hidden = false 'fails
Range("A23").EntireRow.Hidden = false 'Hides entire row, not what I want

这样，它具有整个屏幕的宽度，并在您缩小屏幕时进行缩放。

编辑;

HTML：

  background: url(../img/aperture_labs_bot.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

CSS：

    <footer>

       <div class="footer-test">

          This text will be placed in the footer div. The div class footer-test will have a full-size background image no mather what width it has.

       </div>

    </footer>

让我知道！

Answer 2

您是否尝试更改背景大小以包含？

footer {
  background: url(../img/aperture_labs_bot.png) no-repeat fixed; 
  background-image: url(../img/aperture_labs_bot.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

我希望这会有所帮助......

CSS图像缩放以约束窗口宽度而不会扭曲

2 个答案: