IMG該溢出其固定寬度容器，成爲大的瀏覽器窗口

Question

如果我有一個這樣的代碼：

<div id='container'> 

    ...some stuff.... 

    <div id='img_box'> 
    <img src=''> 
    </div> 

</div> 

在「容器」具有固定的寬度（即1200像素），如果設置了IMG寬度到100％，她只能跨越1200像素，因此在它的容器中受損。

我希望圖像可以跨瀏覽器窗口的整個寬度（減去一些橫向邊距），水平居中......以便IMG在擴大窗口的同時以流暢的方式過濾其容器。

這樣可能嗎？

Answer 1

編號唯一可能的方法是絕對地定位img標記或#img_box，並確保沒有父容器是position:relative。
如果img具有明確的寬度，並且圖像設置爲100％寬度，則它將始終爲父容器的寬度。

Answer 2

您可以使用新的CSS視單位爲這個

FIDDLE

img 
{ 
    display:inline-block; 
    width: 100vw; /* 100% of viewport width */ 
    position: absolute; 
    left:0; 
}