固定容器內部的CSS全寬度圖像

是否有任何方法可以確保始終以全屏方式顯示圖像，而不管容器的尺寸限制如何？在我的情況下，我從服務器接收HTML文件，其中包含不同大小的各種不同容器（通常以百分比指定）中的圖像，並且我希望使用CSS來「分離」容器並始終佔用全部空間屏幕寬度。固定容器內部的CSS全寬度圖像

我該怎麼做呢？

來源

2013-10-22 Neil

你能定位圖像嗎？ http://jsfiddle.net/davidpauljunior/KM4Zj/ – davidpauljunior

是的，但是當我這樣做時，它似乎會導致另一個問題，其中圖像將與它所接近的文本內容重疊。無論如何，只要對圖像說出完整的圖像，而不會完全脫離堆疊環境？ – Neil

要將它們分開，您需要在CSS中應用img { position: absolute; }將它們與堆疊上下文分開。然後，您可以通過應用img { width: 100%; }來填充整個窗口寬度，但是您可能會因爲佈局而遇到問題。您可能應該專注於在文檔的堆疊上下文中使您的包裝容器全寬，以便保持佈局的完整性（這將隨着您最終選擇的任何路線而改變）。

來源

2013-10-22 23:19:06

你需要像'top：0px;左：0px' ..也許還需要'身高：100％;'或'身高：自動...... –

嗨斯圖爾特，正如你提到當我添加位置：絕對我得到其他佈局有問題的圖像有時模糊內容。如果我無法控制應用於其他包裝容器的CSS，那麼無法解決這個問題嗎？ – Neil

有可能是黑客...但你會想要認真對待這些。這些將取決於您的佈局中的其餘項目，所以很難說。以下是一種可能性：將'position：relative;'應用於包裝容器，這將爲您添加'top：0;留下0;'給你的圖片，就像@JoshC提到的那樣。然後，您可以嘗試向這些包裝添加「overflow：visible」，並在圖像中添加負邊距（或其他一些黑客事物）... –

固定容器內部的CSS全寬度圖像

回答

相關問題