我希望我的图像显示得比我的包装器/父级宽度更宽,但仍能响应浏览器窗口大小。目前,我的 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
最佳答案
对旧版浏览器的快速修复是简单地将 overflow-x:hidden;
添加到您的 body
元素。
谈到响应能力和现代浏览器,如果您不想让部分图像被 body
溢出隐藏...
您可以使用媒体查询
来实现所需的:
首先给你的图像添加一个类:
<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;
}
}
关于html - 响应元素比父宽度/包装宽度宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24592577/