我想得到一個完整的圖像作爲我的標題

嘿，我想獲得一個完整的圖像，在瀏覽器的寬度，我的頭。但事情是，我得到一個水平滾動條，我不想要。我想要的是，如果瀏覽器也調整了圖像調整。這可能與CSS？對不起，我的英語不好。這是我的代碼我想得到一個完整的圖像作爲我的標題

#header { 
     Margin-left:auto; 
     Margin-right:auto; 
     heigth:400px; 
     position: center center;  
     min-width: 100%; 
     max-width: 1024; 
} 

    <body> 
     <div id="header"> 
      <img src="header.png" /> 
     </div>

來源

2013-10-09 user2864354

您將需要發佈更多相關的HTML/CSS來展示問題，或者提供一個實例。 –

有幾種方法可以實現無橫向滾動條的完整頁面寬度圖像的這種結果。我經常使用的一種方法是結合CSS來將圖像大小設置爲'寬度：100％;身高：自動;'在圖像上。如果它的父容器是完整的瀏覽器寬度;圖像將隨着視圖端口重新調整大小而調整 – Joe

您可以選擇將圖片設置爲背景圖片並使用背景大小：cover;像這樣：

#header { 
    width: 100%; height 400px; 
    margin: 0 auto; 
    background: url("../header.png"); 
    background-size: cover; 
} 

<div id="header"></div>

您可以找到有關背景大小這裏更多的解釋： http://www.css3.info/preview/background-size/

來源

2013-10-09 19:21:38 ronnyrr

嘗試。

#header { 
    max-width: 100%; 
    background:#ffffff url("header.png") repeat-x; 
}

來源

2013-10-09 19:21:12 Zeeba

你可能會尋找一個背景封面：

html { 
    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-10-09 19:24:09 acairns

您可以設置#header img { max-width: 100%; }

來源

2013-10-09 19:26:24

嗯，如果我做一個背景圖像，圖像本身不顯示。也許是因爲它的寬度爲1400px，可以在瀏覽器的每個不同寬度的橫向滾動條上進行裁剪。

來源

2013-10-10 11:24:30 user2864354

我想得到一個完整的圖像作爲我的標題

回答

相關問題