當屏幕尺寸減小時自動調整圖像尺寸

-2

我使用圖像作爲背景，它完全適合。當我嘗試調整屏幕大小（手機/平板電腦大小）時，圖像停留在後面，不像屏幕那樣縮小 - 不會變得響應。我想改變這種效果，並使其響應並縮小尺寸屏幕。當屏幕尺寸減小時自動調整圖像尺寸

查看附件。

HTML：

<!-- Header --> 
<header id="top" class="header"> 
    <div class="text-vertical-center"> 
     <h1>Test</h1> 
     <h3>The</h3> 
     <br> 
     <a id="show-panel" href="#" class="btn btn-dark btn-lg">Sign Up</a> 
    </div> 
</header>

CSS：

/* Header */ 
.header { 
    display: table; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: url(../img/coffee.jpg) no-repeat center center scroll; 
    color: #ffffff; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

來源

2017-05-25 drorAlfasi

不要設置'width'或'height'在你的CSS，而不是加上'背景重複：不重複; 背景尺寸：含有;背景位置：中心;' –

什麼是這個方法的優點？ – drorAlfasi

這裏有一些很好的答案。爲什麼不接受一個？ –

您還可以嘗試在標題div上使用絕對位置並將邊距設置爲始終覆蓋整個區域。我在這裏根據你的代碼做了一個例子。 https://codepen.io/morganfens/pen/NjJBJB

.header { 
background: url(../img/coffee.jpg); 
position: absolute; 
top:0; 
bottom:0; 
right:0; 
left:0; 
background-repeat:no repeat; 
background-size:cover; 
color: #ffffff; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
}

來源

2017-05-25 14:17:25 morganfens

嘗試切換向上的寬度和高度使用VW和VH，而不是％。此外，而不是使用滾動作爲您的背景圖像屬性上的位置，使用固定。我試過了jsfiddle。

.header { 
    display: table; 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    background: url(http://lorempixel.com/1920/1080/food) no-repeat center center fixed; 
    color: #ffffff; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

來源

2017-05-25 14:06:50 trav

我在我的應用程序，但隨後在「檢驗」改變了它，如果我改變了看法，以移動/平板電腦查看它變小，不適合屏幕爲％。 – drorAlfasi

你可以使用這個CSS代碼：

html { 
    background: url(img.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

從這裏：https://css-tricks.com/perfect-full-page-background-image/

記住做一些研究，問問題之前！在google上快速搜索「css full background image」會給你很多好的答案。

來源

2017-05-25 14:20:20

嗨，詹姆斯我做我的朋友，否則我就不會問這個問題。 – drorAlfasi

做過一些研究嗎？ –

因爲你使用的「不重複中心中心滾動」和我使用「固定不重複中心中心」。 –

當屏幕尺寸減小時自動調整圖像尺寸

回答

相關問題