Question

我希望我的图像显示比我的包装/父宽度更宽，但仍然能够响应浏览器窗口大小。目前，我的包装宽度为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溢出隐藏部分图像...
您可以使用media queries来实现所需的目标：

<强> 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;
  }
}

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

1 个答案: