Javascript Bootstrap3（CSS）的几个小问题

我正在创建一个网站作为一个项目，并使用bootstrap 3-我对某些部分有一些问题：

大窗口中的站点：

小窗口中的站点：

1） 背景图像：当我缩小窗口时，图像会调整到某一点，然后停止。在移动设备中，有一个很大的溢出隐藏。有没有办法根据窗口大小调整它的大小

我当前的css代码：

#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -50px;
  /* Pad bottom by footer height */
  padding: 0 0 50px;
  background:url("/images/bgg5.jpg") no-repeat;
  background-size: cover;
}

2） 输入字段-在小型浏览器中调整过大-是否有方法防止其调整大小，除非窗口宽度小于输入字段的长度

这就是它在移动设备中的样子：

1输入字段的我的代码：

<div class="form-group">

                <label for="inputID">Input</label>

                <div class="row">

                    <div class="col-xs-4">

                        <div class="input-group">

                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

                            <input type="text" class="form-control" placeholder="Enter Input" name="login">

                        </div>

                    </div>

                </div>

            </div>

输入

不，您的图像没有足够的高度来进一步调整大小，

背景大小：cover

意味着它必须覆盖整个屏幕而不会失去比例。尝试为手机设置一个自定义背景位置css，这样背景可以显示你想要的正确部分

您的div的宽度有一个class

col-xs-4

，这使得在任何屏幕上占据33%的宽度大于或等于x-small。要在手机中全幅显示，您可以尝试将其更改为

col-xs-12 col-sm-4

---

有没有办法根据浏览器调整整个图像的大小-即使不保持比例-我看到一些网站的背景图像是完全可以看到的，即使在很小的范围内screens@John_Nil好吧，如果你不在乎比例，就把它设置为背景大小：100%100%。我不会这么做，因为拉伸图像太难看了：(