html - 响应元素比父宽度/包装宽度宽

Question

我希望我的图像显示得比我的包装器/父级宽度更宽，但仍能响应浏览器窗口大小。目前，我的 wrapper 宽度是 500px。

我可以通过以下方式获得更宽的图像:

<p style="margin-left: -25%; margin-right: -25%;">
    <img alt="My wide image" style="width: 100%;" src="wide_image.jpg"/>
</p>

上面给出的图像宽度比父级/包装宽度宽，但是，图像不随浏览器窗口缩放；相反，包装器/父级宽度会正确缩放，并且浏览器中会出现水平滚动条以从左到右导航图像。

提前致谢。 :-)

编辑:如 Elliott Post 所指出的，添加了缺失的双引号。

Edit2:此处显示的答案相对于浏览器窗口缩放图像，但是它遮盖了图像后的文本并且是页面的整个宽度而不是每边额外增加 25%:Is there are way to make a child DIV's width wider than the parent DIV using CSS?

Edit3:这是来自 Roko C. Buljan 的修改后的 jsbin:http://jsbin.com/sumoqigo/1/edit

Answer 1

对旧版浏览器的快速修复是简单地将 overflow-x:hidden; 添加到您的 body 元素。

谈到响应能力和现代浏览器，如果您不想让部分图像被 body 溢出隐藏...
您可以使用媒体查询来实现所需的:

jsBin demo

首先给你的图像添加一个类:

<img class="wideImage" src="image.jpg" alt="My image"/>

比下面的 CSS:

.wideImage{
    width:150%;
    margin-left:-25%;
}

@media(max-width: 750px){ /* 25%of500px=125; 125*2=250; tot=750 */
  .wideImage{
    width: 100vw; /* vw is the CSS3 unit for Viewport Width*/
    margin-left: calc( (-100vw + 500px) / 2 );
  }
}
@media(max-width: 500px){
  .wideImage{
    width: 500px;
    margin-left:0;
  }
}