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

Question

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

Although position:absolute; can rip an image from a normal document flow, I don’t want to remove the vertical space that saves the image. If I did, any content that appears after the image will be pushed up, and as a result, it will appear behind the image.

Here is an example script.

The image is the vertical behavior that I want. Obviously, if the image was horizontally larger, the height should increase proportionally. Image two is the horizontal behavior I would like. However, this does not preserve vertical space. I experimented with negative fields, but could not get anything viable.

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

Answer 1

Once browser support is complete, you can use calc to apply a negative field.

DEMO with 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 #wrapper fixed-width element requirements aren't strong, you can actually use vw for everything, as in:

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

Which simplifies the margin-left declaration for using hard-coded vw units that have 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 straight up vw

In this case, if this project needs to maintain a screen width below which 40vw your content wrapper looks coarse, you will need to use a media query to assign a higher% viewport width to #wrapper or to degrade the design so that it uses different layout calculations and did not use content covering the image.

Answer 2

Try the following:

 #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 stretch the image to the width of the screen, margin-left: 50% will center the left border of the image to the center of the wrapper, and then transform: translateX(-50%) will move the image 50% of its width to the left.

You can set the width of the image as you want. It will remain centered, and it will have edges above and below.

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

Answer 3

use the famous padding-bottom hack. since padding-bottom always refers to its element width, you can use the aspect ratio of the image as a padding-bottom to maintain the desired height, while maintaining responsiveness.

 div { position: relative; width: ...px; height: 0; // very important! padding-bottom: 56.25%; // image ratio in % - 16:9 for example overflow: hidden; } div > img { position: absolute; width: ...; height: auto; } 

Answer 4

If you allow another <div> wrap around each image, this can be done quite easily.

HTML:

 <div id="wrapper"> text blah blah <div class="image-wrapper"> <img src="pic.jpg"/> </div> more text blah blah </div> 

CSS

 #wrapper { margin: 0px auto; width: 400px; } .image-wrapper { width: 200%; position:relative; left:-50%; } .image-wrapper img { display: block; margin: 0px auto; max-width: 80%; } 

You basically wrap the image in a very wide <div> so you can center the image inside it.

Adjust the numbers as necessary. max-width: 80% is 80% of 200%, so the image is actually 160% of the width of your big #wrapper .

Here's a script based on yours: http://jsfiddle.net/bdh0mrLs/

Answer 5

How about this?

 #wrapper img.one { display: block; margin: 30px auto; width: 130%; margin-left:-15%; } 

Here jsfiddle

Basically, the width value is set to more than 100%, and the margin of "15%" -

 130/2 - 50 (width / 2) - 50 

which should center it.

PS: I came up with this based on your question. However, your jsfiddle seems like you want the image to be 100% body wide. Just need to clarify if you expect. Could try to get around this.

Answer 6

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

Answer 7

Try with overflow-y: hide while saving overflow-x: visible in the parent div.