背景圖像不適合所有的屏幕尺寸

-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

背景圖像不適合所有的屏幕尺寸

回答

相關問題