使一個<img>標記延伸過去<body>標記在css

我試圖開發一個標題區域擴展超過通常960px寬容器，而不使用背景圖像，我的原因是因爲<img>標記會更好地工作在我的情況。使一個<img>標記延伸過去<body>標記在css

我的問題是，如果我將在容器中我的形象，像這樣的代碼示例：

<style> 
    #container { 
     width: 960px; 
     margin: 0 auto; 
    } 
</style> 
<div id="container"> 
    <img src="myimage.jpg" alt="my image" /> 
</div>

我希望能夠利用這個圖像的中心是，在整個頁面，擴大過去的容器添加到視口的末端，而不添加滾動條，假設圖像的大小保持在1280px的恆定寬度，但高度不同。

我一直想今天上午，但我不認爲它可以在不設置溢出來完成：藏在身上的標籤，這是不好的，因爲我想它牛逼OBE能夠滾動如果窗口比容器小。

我希望你們能幫忙:)

來源

2010-06-22 studioromeo

有什麼理由使用''，而不是一個背景圖像？ – 2010-06-22 11:39:43

嗨抱歉這麼晚纔回復，原因是嘗試做同樣任務的替代方法。我的老解決方法是使用一個包裝器，應用背景圖像，然後設置960的最小寬度，以便在調整大小時，背景圖像停止嘗試處於e中心點（如果有意義的話）。我的想法與標籤是複製這個，原本我只是希望它會是一個負利潤率的情況下，但我忘記了溢出方面：\ 經過一段時間的圍繞之後，我想我可能會發布在這裏看看是否有其他人試圖做同樣的事情。 – studioromeo 2010-06-22 18:22:55

你是對的，它不起作用。爲什麼它必須在容器內部？

你可以不喜歡這樣。

<html> 
<head> 
<style> 
html, body{ 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
text-align: center; 
} 
#header{ 
width: 2000px; 
float: left; 
overflow: hidden; 
} 
#container{ 
width: 960px; 
height: 500px; 
margin: 0 auto; 
overflow: hidden; 
} 
#page{ 
overflow: hidden; 
width: 100%; 
height: 100%; 
} 
</style> 
</head> 
<body> 
    <div id="page"> 
    <div id="header"> 
     <img src="myimage.jpg" alt="my image" /> 
    </div> 
<div id="container"> 
</div> 
    </div> 
</body> 
</html>

來源

2010-06-22 11:50:49

對不起盧卡斯，沒有運氣。 – studioromeo 2010-06-22 11:52:30

你的第二次嘗試:)這工作我偵察感謝盧卡斯，但是我想從創建兩個容器堅持了，所以我偵察我就要用我原來的背景圖片的方式堅持:)謝謝你曾經那麼多的支持然而！ :) +1 – studioromeo 2010-06-22 18:34:17

如果IMG是否正好位於x-POS放置：0和Y-POS：0，你可以使用的位置是：絕對放置它：

img#my_header{ 

position:absolute; // Tell the browser to break document work flow for this ID 

z-index:1; // Tell the browser to pull up in the stack this ID by 1 

top:0; // tell the browser to place this ID at 0px from top of view port 

left:0; // tell the browser to place this ID at 0px from left of view port 

}

這是一個示例，給你一個想法，你可以打破文檔工作流程，將你的img標籤設置到所需的位置......調整頂部和左側座標，你應該解決它！

希望它有幫助！

來源

2010-06-22 11:53:26 Zuul

感謝您的回答！我試過但沒有運氣，它定位它很棒，但是滾動條仍然出現在一個大圖像上（比如說1280px）我想我現在可以看到爲什麼我們使用背景圖像而不是img標籤來處理這種事情 – studioromeo 2010-06-22 18:31:19

我的想法是類似於盧卡斯的。從容器中取出，並放入它自己的容器中（例如，id =「header」）。設置的#header爲width：100％（這應該是視口的寬度和溢出：。。隱藏然後，只要你想放置的#header - 如果需要使用絕對定位Zuul的建議

... 
<style type="text/css"> 
#header { width: 100%; overflow: hidden; margin: 0; } 
</style> 
... 
<div id="header"> 
    <img src="myimage.jpg" alt="My Image" /> 
</div> 
...

我認爲，應該制定出適合您。

來源

2010-06-22 16:05:24

使一個<img>標記延伸過去<body>標記在css

回答

相關問題