徽標和標題容器沒有正確調整大小

我一直在努力讓我的公司徽標圖像和背景圖像根據所查看的屏幕大小進行調整。但是，當我獲得背景圖像以正確調整大小時，徽標圖像不會改變大小。但是，當我能夠讓它們都調整大小時，徽標圖像將會非常大並且覆蓋整個屏幕的寬度。然後，當我將徽標圖像的寬度更改爲較小時，背景圖像縮小至小於屏幕寬度。徽標和標題容器沒有正確調整大小

這裏是鏈接到我有問題的着陸頁與http://www.dorkdungeontestblog002.blogspot.com/

我想標題圖片和標識圖像，同時響應不同的屏幕尺寸，產生以下效果，但你可以看到查看網站，我沒有達到這個結果。

Hopeful Header and Logo Appearance

如果有人能幫助我這個，我真的很感激，我一直在這幾個小時，現在，它只是不工作。請讓我知道是否有任何進一步的信息可以提供。

這是所有頭記下代碼...

/*---------[HEADER]---------*/ 
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;} 
#logo-container img { 
width: 100%; 
height: auto; 
background-size: contain; 
} 
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;} 
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}

來源

2015-10-21 Dave

由於徽標分爲兩個元素，div header-holder和圖像是不可能的。將說話的骰子放在圖像和標題架中，並用背景大小：封面。 –

當我使用背景大小：封面時，說話模具的背景圖像變得非常大以至於我無法再看到它。所以我不確定我是否理解了你的意思，但我確信我做錯了。 – Dave

對不起，但在這一刻你的博客已關閉，所以我看不到代碼。但是，在標頭保持器背景中使用圖像，您可以使用背景線性漸變。赫拉一個很好的發電機：http://www.cssmatic.com/gradient-generator –

寫到這裏的編輯器。

.container, 
#front_page_container { 
    width: 100% 
}

以這種方式，倒數仍然居中。但小分辨率太大了，我不知道這個類是否在網站的另一個地方使用。我的建議是改變佈局。您使用的模板根本沒有響應，因此您需要做大量工作才能使其響應。

來源

2015-10-23 08:02:35

是的，我可以看到需要做很多額外的工作。我覺得我對現在的樣子很滿意，就像它只是暫時的。非常感謝你們的幫助。 – Dave

不客氣。我也喜歡d20：D –

徽標和標題容器沒有正確調整大小

回答

相關問題