响应元素比父宽度/包装宽度宽-Java 学习之路

我希望我的图像显示比我的包装/父宽度更宽，但仍然响应浏览器窗口大小 . 目前，我的包装宽度为500px .

我可以通过以下方式获得更广泛的图像：

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

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

先感谢您 . :-)

编辑：Elliott Post指出，增加了缺失的双引号 .

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

编辑3：这是来自Roko C. Buljan的修改过的jsbin：http://jsbin.com/sumoqigo/1/edit

1 回答

对旧版浏览器的快速修复只需将 overflow-x:hidden; 添加到 body 元素即可 .

谈论响应性和现代浏览器，如果你不想让图像的某些部分被 body 溢出隐藏......
you could use media queries to achieve the desired:

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

回复于 2024-04-25T20:59:05+08:00

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

1 回答

相关问题