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

Question

如果我有这样的代码:

<div id='container'>

  ...some stuff....

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

</div>

其中“CONTAINER”的宽度是固定的(即1200px)，如果我把IMG的宽度设置为100%，她的跨度只有1200px，所以在它的container中是受限的。

我希望该图像可以横跨浏览器窗口的整个宽度(减去一些横向边距)，水平居中....以便 IMG 在扩大窗口时以流畅的方式溢出其容器。

这样可以吗？

Answer 1

你可以为此使用新的 css viewport units

FIDDLE

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