背景图像不适合所有屏幕尺寸

Question

我正在尝试将背景图像适合任何屏幕，当我在笔记本电脑中打开时，它很好，但在桌面上它会丢失图像的某些部分。我尝试了 CSS，但 CSS 中有什么我错过的吗？

但是数据列表和按钮位于所有屏幕的确切中心，包括移动设备，但不是我的背景图像。请帮忙..

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
  var textval = $('#textcat').val();
  window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.place {
  height: 30px;
}
.place[placeholder] {
  font-size: 18px;
}
/* CSS */
.btnExample {
  color: #FFFFFF;
  background: #228B22;
  font-weight: bold;
  border: 1px solid #000000;
  height: 30px;
  width: 90px;
}
.btnExample:hover {
  color: #FFFFFF;
  background: #008000;
}
.img-box {
  /*position: relative;
      width: 100%;
      height: 0;*/
}
img {
  position: absolute;
  width: 100%;
  height: auto;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-image: url('bgimage101.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
#category {
  width: 500px !important;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="text-center align-middle">
        <input list="category" name="category" id="textcat" class="place" placeholder="Enter your area.." style="width: 400px !important">
        <datalist id="category">
        <option id="www.google.com" value="fruits" />
        <option id="www.fb.com" value="animals" />
        <option id="www.ymail.com" value="vechiles" />
        <option id="www.msn.com" value="ornaments" />
      </datalist>
        <input class="btnExample" id="btn" type="button" value="Search">
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 1

这是您的固定容器类

.container{
      width: 100%;
      height: 100%;
      background-image: url('bgimage101.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      border: 1px solid red;
        }
    or
    
    .container{
      background-image: url('bgimage101.jpg');
      background-repeat:no-repeat;
      background-size:contain;
      background-position:center;
      }

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
  var textval = $('#textcat').val();
  window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.place {
  height: 30px;
}
.place[placeholder] {
  font-size: 18px;
}

/* CSS */
.btnExample {
  color: #FFFFFF;
  background: #228B22;
  font-weight: bold;
  border: 1px solid #000000;
  height: 30px;
  width: 90px;
}
.btnExample:hover {
  color: #FFFFFF;
  background: #008000;
}
.img-box {
  /*position: relative;
      width: 100%;
      height: 0;*/
}
img {
  position: absolute;
  width: 100%;
  height: auto;
}
.container{
      width: 100%;
      height: 100%;
      background-image: url('bgimage101.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      border: 1px solid red;
        }
#category {
  width: 500px !important;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="text-center align-middle">
        <input list="category" name="category" id="textcat" class="place" placeholder="Enter your area.." style="width: 400px !important">
        <datalist id="category">
        <option id="www.google.com" value="fruits" />
        <option id="www.fb.com" value="animals" />
        <option id="www.ymail.com" value="vechiles" />
        <option id="www.msn.com" value="ornaments" />
      </datalist>
        <input class="btnExample" id="btn" type="button" value="Search">
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 2

试试这段代码：

.container{
background-image: url("Your image address");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}

Answer 3

尝试使用

.container{
    background-image: url(../images/image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh; //with this you'll not lose image
}

Answer 4

您可以使用

.container {
    background-size: contain;
    background-position: center;
}

使用background-size: cover;时，背景图像会缩放到尽可能大，以便背景图像完全覆盖背景区域。背景图像的某些部分可能不在背景定位区域内的视图中。