CODEWITHSUNDEEP
htmlcss
EarthIsHome
EarthIsHome

Reputation: 735

Responsive element wider than parent width/wrapper width

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

Upvotes: 1

Views: 887

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

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

Upvotes: 1

Related Questions