響應div與寬度和高度設置

我使用基金會4作爲我的個人網站的框架（不是100％的投資組合網站，更像廣告自己作爲一個自由職業者），我有一個接觸盒與背景圖像集和這些應用CSS樣式：響應div與寬度和高度設置

#contact-box {width: 1052px; 
     height: 400px; 
     background-image: url('../images/contact-bg.png'); 
     margin-top: 150px;}

我想使它所以當你縮小瀏覽器，它按比例縮小，而是它只是給我一個水平滾動條和不結垢的一切，我知道這是因爲1052px的寬度設置...所以，我怎麼會編碼出來，所以它的響應？如果我使用最大寬度和最大高度，則會打破div並移除其bg圖像。聯繫方式中有一個聯繫表單（這是一個響應式）以及一個電話號碼，電子郵件和3個社交圖標。

來源

2013-05-06 user2353287

將＃contact-box的寬度設置爲寬度：100％。

來源

2013-05-06 03:48:21 Graham

我嘗試另一種方法，並沒有奏效。 – user2353287 2013-05-06 03:49:10

它做了什麼？如果沒有更多信息，很難幫助太多。寬度：100％不會佔用整個寬度嗎？您是否已將＃個聯繫方式更改爲內聯元素？我認爲這是一個分區？ – Graham 2013-05-06 03:51:19

我想只是發表評論，但我似乎沒有可以選擇..

我不知道這是不是你想要的答案，但我通常做背景圖像縮放到窗口大小像這樣的代碼：

width: 100%; 
height: 400px; 
background-image: url('../images/contact-bg.png'); 
background-size: 100%; 
margin-top: 150px;

您可以使用div標籤和頁面身體CSS代碼，雖然在我的實驗的寬度和高度值是沒有必要的頁面正文。這樣做會保持背景圖像的縱橫比，並且應該允許它與窗口一起縮放。

由於上述示例保持縱橫比，因此圖像將垂直縮放到超出容器大小的位置，並且看起來會在底部截斷。或者，您可以使用：

width: 100%; 
height: 400px; 
background-image: url('../images/contact-bg.png'); 
background-size: 100% 400px; 
margin-top: 150px;

background-size元素的第二個參數將確保圖像永遠不會垂直縮放。但是，只要窗口的寬度超過所使用圖像的寬高比，此方法將導致背景圖像水平伸展。

希望這會有所幫助！ :)

來源

2013-05-06 04:37:10

你可以試試這個，並修改它從這裏http://css-tricks.com/perfect-full-page-background-image/

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
}

採取您根據來源，這是這樣做

#contact-box{ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-05-06 05:06:09

響應div與寬度和高度設置

回答

相關問題