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

-1

我想让我的背景图像适合任何屏幕，当我在笔记本电脑上打开它的时候它很好，但是在桌面上它会放松图像的某些部分。我试过CSS，但是CSS中有什么我想念的？背景图像不适合所有的屏幕尺寸

但是，datalist和按钮进入所有屏幕的确切中心，包括移动但不是我的背景图像。请帮助..

$('#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>

来源

2017-05-16 prog

这是你的固定容器类

.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; 
     }

来源

2017-05-16 04:12:36

第一个代码不是或部分thanx – prog

您可以使用

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

当您使用background-size: cover;背景图像缩放使得背景区域被完全覆盖到尽可能大背景图像。背景图像的某些部分可能不在背景定位区域内。

来源

2017-05-16 04:09:42 athi

但阿西图像来完全不过，页面的顶部和底部充满了空白区域。有什么我应该做的选择适当大小的图像？ – prog

然后你可以使用background-size：cover;但整个图像可能无法看到。您可以选择适当尺寸的图像。 – athi

尝试

.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 
 
}

来源

2017-05-16 05:01:39 SanjanaHE

@prog能够解决您的问题？试过我的答案？ – SanjanaHE

试试这个代码：

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

来源

2017-05-16 05:09:22 pranavkriya

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

回答

相关问题