Responsive element wider than parent width/wrapper width

Question

I would like my images to be displayed wider than my wrapper/parent width but still be responsive with the browser window size. Currently, my wrapper width is 500px.

I'm able to achieve wider images by:

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

The above gives an image width wider than parent/wrapper width, but, the image doesn't scale with the browser window; instead, the wrapper/parent width scales correctly, and a horizontal scroll bar appears in the browser to navigate the image from left to right.

Thank you in advance. :-)

Edit: added missing double quote as Elliott Post pointed out.

Edit2: the answer shown here scales the image with respect to the browser window, however it obscures text after the image and is the full width of the page rather than 25% extra on each side: Is there are way to make a child DIV's width wider than the parent DIV using CSS?

Edit3: Here is a modified jsbin from Roko C. Buljan: http://jsbin.com/sumoqigo/1/edit

</img> ?? no, img is a single-tag, no need to use a closing one. (<img src="myimage.jpg" alt="My wide image"> is quite enough. Also note the alt tag you're missing.) — Roko C. Buljan
If I use your code with some nice image it ends up like: jsbin.com/damof/1/edit which makes your question hard to decipher. — Roko C. Buljan
@ Roko C. Buljan That is to make the image wider than the parent width. — EarthIsHome
Yes, that is correct; when the browser reaches 500px+25%+25%, I would like the image to shrink with the browser. — EarthIsHome

Roko C. Buljan Roko C. Buljan · Accepted Answer · 2014-07-06T04:29:07

A quick fix for older browsers is to simply add overflow-x:hidden; to your body element.

Talking about responsiveness and modern browsers, if you don't want to have parts of your images hidden by the body overflow...
you could use media queries to achieve the desired:

jsBin demo

First add a class to your image:

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

Than the following 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;
  }
}

Responsive element wider than parent width/wrapper width

1 Answers