縮放窗口大小的div div

所以，我是一個初學者的HTML/CSS編碼器，並試圖做一個簡單的網站。現在我有一個整潔的背景，表現完美。但是，在頂部中心添加徽標時，它在當前窗口大小上看起來很完美。但是當我調整窗口大小時，一半的標誌被切斷。縮放窗口大小的div div

我的CSS樣式：

.header-logo { 
background: url(images/header-logo.png); 
position: relative; 
height: 200px; 
margin-left:auto; 
margin-right:auto; 
background-size:cover; 
width: 971px; 
z-index: 2; 
}

我想有一個自動規模的CSS/JS設置爲，但我不幸運地找到它。

所有幫助表示讚賞！

路易

來源

2016-05-19 Louis de Looze

你應該在你的CSS – MayK

杜佩http://stackoverflow.com/questions/18666106/a-div-with-auto-resize-when的使用@media查詢 - 改變窗口寬度高度？ – Oisin

的問題是這兩行代碼：

height: 200px; 

width:971px;

當您使用「PX」是像素的固定金額，這意味着它不能根據屏幕大小而改變。如果您使用「em」，則圖像將根據訪問者的屏幕大小而改變。

這裏有兩個快速參考，我希望可能會有所幫助。

http://www.w3schools.com/cssref/css_units.asp

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

要解決它，你會做這樣的事情：

height: 100em; 

width:486em;

（不要用我的，當然精確值。）

編輯：或者，使用這樣的百分比可能會很好：

width: 971px; 
max-width:100%

編輯2：有人指出，我認爲你可能想加入這一行，以及：

height:auto;

來源

2016-05-19 19:18:10 CSLearner

或用戶百分比值？ 100％，90％，... – Davuz

這也可以。其實這可能會比我最初的建議更好。在這種情況下，它會是這樣的：寬度：971px;最大寬度：100％; – CSLearner

em和vw之間的區別是什麼，百分比是否適用於窗口的當前寬度？ –

這是因爲你的寬度設置好的被固定在971px，你應使用寬度：100％並設置最大寬度或至少使用@media來設置徽標寬度。

使用@media：

@media screen and (min-width: 480px) { 
    .header-logo{ 
     width: 250px; 
     background-position: center; 
    } 
}

來源

2016-05-19 19:18:29

用你的方法我得到一個滾動條，不幸的是不是一個縮放。 –

這只是一個例子，你需要正確設置你的div的高度和重量 –

好像你想要一個971px寬的標誌，你有一個問題時，因爲標誌被切斷的屏幕尺寸小於。

你需要的是一個媒體查詢像這樣的一個，並將其放置在年底你的CSS

@media (max-width: 971px) { 
    .header-logo { 
     width: 100%; 
    } 
}

這樣971px在任何屏幕尺寸將寬度屬性更改爲屏幕尺寸的100％。

您不需要在媒體查詢中重新聲明該類的所有屬性，它只會更改必須適應新屏幕大小的屬性。

瞭解更多關於媒體查詢的位置：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2016-05-19 19:19:26

當使用百分數時，出於某種原因，我沒有圖像了。 –

縮放窗口大小的div div

回答

相關問題