容器內需要圖像以跨越頁面的整個寬度，並且仍然充當內聯塊/塊元素

Question

我正在嘗試使圖像在具有給定寬度的div內占據頁面的整個寬度。 我設法通過將其添加為背景圖像並添加以下樣式來做到這一點：

background-image: url(URL);
width: 100%;
height: 400px;
position: absolute;
left: 0;

但是，該圖像現在位於我所有其他元素的頂部，因此我需要將div顯示為塊或內聯塊元素，但是我不太確定實現此目的的途徑，因為當我將其作為樣式應用時沒有什么變化。 讓我知道是否有一種很好的方法可以做我想做的事情。 謝謝！

這是我的問題的JSFiddle示例： http : //jsfiddle.net/T2t47/13/

Answer 1

看起來這可能就是您正在尋找的http://jsfiddle.net/T2t47/12/

.introduction div {
    position:relative;
    height:200px;
    width:100%;
    background-position: center center;
    background-size:cover;
    left: 0;
    top:0;
    z-index: -999;
}

Answer 2

如果我理解正確，您希望圖像顯示在示例中的列表上方嗎？ 如果是這樣，只需刪除position：absolute; 左：0； 應該使圖像充滿頁面的整個寬度，並將其放置在列表上方。 這是因為position：absolute; 將div移出文檔流。

因此，您的樣式將是：

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
}

http://jsfiddle.net/94Yvw/

Answer 3

因此，您的元素落在該元素之下的原因是因為它從文檔流中刪除。 （您可能已經閱讀過。）可以將其視為一個被小卵石包圍的盒子。 在盒子就位的情況下，鵝卵石可以很好地圍繞盒子放置。 但是，如果我們拉起盒子，我們的一些鵝卵石就會掉到盒子下面，我們再也看不到它們了。 我想稱呼它為幽靈元素。 它是其他元素無法檢測和觸碰的。

（對不起，我知道這已經變得很困難了。）

本質上，您在項目中所做的就是打破它。 如果元素的寬度為200像素，則其內部的寬度不應超過200像素。

因此，我在JSFiddle中提供的最佳解決方法是顯示將父元素設置為無最大寬度。 但是要添加容器元素，請在該容器元素內包裝必要的元素，並將其寬度設置為所需的任何設置寬度。

.container{
  width: 100%;
}
.h1-container{
  width: 200px
}
.img-container{
  width: 100%;
}

這使圖像元素空間可以呼吸，而其他元素則可以容納它們。

此外，位置上的鏈接非常好： http ： //css-tricks.com/absolute-relative-fixed-positioning-how-do-they-differ/

Answer 4

這是您想要的結果嗎？

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
    position: absolute;
    left: 0;
    z-index: -5; /* now it is not on top of everything ! */
}

http://jsfiddle.net/T2t47/4/

Answer 5

使用vw單位和負利潤可以輕松完成。 而且反應靈敏。

.full-width-block {
  width: 100vw;
  position: relative;
  left: 50%;  
  margin-left: -50vw;
}

看看我的小提琴： https : //jsfiddle.net/ondrejruzicka/ghs6kmgw/