Make image wider than parent <div> while preserving vertical space?

Question

If you have a parent div of fixed width, is it possible to make a child <img> wider than the parent, while constraining proportions, while also preserving vertical space?

While position:absolute; can break the image out of the normal document flow, I don't want to remove the vertical space the image retains. If I did, any content that appears after the image would be pushed upwards, and as a result, it would appear behind the image.

Here's an example fiddle.

Image one represents the vertical behavior I want. Obviously, if the image were horizontally larger, the height should increase proportionally. Image two represents the horizontal behavior I would want. However, this does not preserve vertical space. I experimented with negative margins, but couldn't get anything viable working.

Assuming unknown image dimensions, is the desired effect possible without JavaScript?

Answer 1

Try with this:

#wrapper img.two {
    display: block;
    margin: 30px 0;
    width: 100vw;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

width: 100vw will make image stretch to screen width, margin-left: 50% will center left border of image to the center of the wrapper, and then transform: translateX(-50%) will move image 50% of its width to the left.

You can set image width to whatever you want. It will stay centered and it will have margins at the top and bottom.

demo: http://jsfiddle.net/7cjr6jff/

Answer 2

Once browser support catches up, you could consider using calc to apply a negative margin.

DEMO using calc()

html {
  font-size: 10px; /* Set a base value for easy math, or for sane defaults */
}

body {
  background-color: #FC9;
  margin: 0;
}

#wrapper {
  font-size: 1.9rem; /* Or whatever */
  background-color: #FFF;
  margin: 0 auto;
  padding: 3rem;
  width: 400px;
}

#wrapper img.one {
  display: block;
  margin: 3rem 0;
  width: 100%;
}

#wrapper img.two {
  display: block;
  width: 100vw;
  /* 
   * Math break: 
   *   viewport width: 100vw
   *   #wrapper width: 400px
   *   remainder: (100vw - 400px)
   *   want to shift the image by half of the remainder, so: (100vw - 400px) / 2
   *   and apply it as a negative margin: -1 * (100vw - 400px) / 2)
   */
  margin: 3rem 0;
  margin-left: -webkit-calc(-1 * (100vw - 400px) / 2);
  margin-left: calc(-1 * (100vw - 400px) / 2);
}

If your requirements for a fixed-width #wrapper element aren't firm, you could actually use vw for the whole thing, as in:

#wrapper {
  ...
  width: 40vw;
}

Which simplifies the margin-left declaration to use hardcoded vw units, which has better browser support:

#wrapper img.two {
  display: block;
  width: 100vw;
  /* 
   * Math break: 
   *   viewport width: 100vw
   *   #wrapper width: 40vw
   *   remainder: 100vw - 40vw = 60vw
   *   want to shift the image by half of the remainder, so: 60vw / 2 = 30vw
   *   and apply it as a negative margin: -30vw
   */
  margin: 3rem 0 3rem -30vw;
}

DEMO of straight-up vw

In that case, if this design needs to support screen widths below which the 40vw of your content wrapper looks gross, you'll either need to use a media query to assign a higher % of the viewport width to #wrapper, or to degrade the design so that it uses different layout calculations and doesn't use the content-spanning image.

Answer 3

by this code you don't need to change margin from top or bottom

<style>
.wrapper
{
width: 400px;
margin:auto;
background:#e6e6e6;
}

.wrapper img
{
width:120%;
clear:left;
margin-left:-10%;
}
</style>

<div class="wrapper">

Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu
<img src="http://wallpoper.com/images/00/31/09/01/pokemon-pikachu_00310901.jpg" />
Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu
</div>