背景图像无法通过浏览器缩放正确调整大小答案

【问题标题】：Background image not sizing correctly with browser zoom背景图像无法通过浏览器缩放正确调整大小
【发布时间】：2013-06-07 10:28:05
【问题描述】：

当有人使用浏览器放大时，我遇到了正确显示网站标题的问题。横幅将在右侧切断并显示正文背景图像。该站点的地址是：http://www.bemidjisportsonline.com，关于解决此问题的任何想法？谢谢。我将在下面发布我的正文、标题和横幅元素的 CSS。我所说的截图可以在这里找到：http://prntscr.com/19e59r。

body{
    font: 100%/1.25 Arial, Helvetica, sans-serif;
    /*background: url(/_images/background-repeated.png) top center repeat-x;*/
    background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}

header, nav, section, article, aside, footer {display:block;}

header{
    width:100%;
    position: relative;
    background: url(/_images/header_trees.png) no-repeat;
    background-size: 100% auto;
    height: 7em;
}

#banner{
    z-index:100002;
    margin: 0 auto;
    width:75em;
    height:7em;
}

【问题讨论】：

似乎当浏览器放大到某个点时，它看起来像是在正常缩放，但是当底部滑块向右移动时。您可以看到横幅和导航背景在右侧被截断。
我通过为 body 元素提供 1200 像素的最小宽度进行了一些修复；

标签： css image browser responsive-design zooming

【解决方案1】：

您需要更改background-size。像这样：

header {
  width: 100%;
  position: relative;
  background: url(/_images/header_trees.png) no-repeat;
  background-size: 100% 100%;
  height: 7em;
}

【讨论】：

哇，我觉得自己像个傻瓜。非常感谢！

【解决方案2】：

尝试将#banner 宽度更改为 100%。

#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;

}

【讨论】：

这种工作。它将随着浏览器窗口的宽度缩放，但图像的高度随后变为关闭。