IMG溢出其固定宽度的容器，变得像浏览器窗口一样大

Question

如果我有这样的代码：

<div id='container'>

  ...some stuff....

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

</div>

其中“CONTAINER”具有固定的宽度（即1200px），如果我将IMG宽度设置为100％，则其仅跨越1200px，因此在其容器中进行了成本管理。

我希望该图像可以跨越浏览器窗口的整个宽度（减去一些横向边距），水平居中....这样IMG在扩大窗口的同时以流畅的方式流过容器。

这样可能吗？

Answer 1

您可以为此

使用新的css视口单元

<强> FIDDLE

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

Answer 2

没有。可能的唯一方法是绝对定位img标记或#img_box，并确保没有父容器position:relative。
img将始终是父容器的宽度，如果它具有明确的宽度并且您的图像设置为100％宽度。