So I wanted to know if it's possible to do this. Basically, I've got my #wrapper set to margin: 0 auto, but want all imgs that are already within a #content div to extend their width until the edge of the browser. Like so:
@Paulie_D That's pretty much what I'm looking, except with a wrapper that keeps the rest of the content (sans the images) centered. Know of a way around that?
So I wanted to know if it's possible to do this. Basically, I've got my #wrapper set to margin: 0 auto, but want all imgs that are already within a #content div to extend their width until the edge of the browser. Like so:
Here's a jsFiddle I setup to try and replicate my idea: http://jsfiddle.net/W7p3K/45/
Any idea if this is possible? Thanks in advance.
You mean like this?
http://jsfiddle.net/hL43A/
Clearly an image can't break out of it's container though.
Yeah, I wanted the wrapper to stay put though.
Then "No". Either it's in the wrapper or it isn't.
You might be able to position it absolutely though...not sure how that would scale.
Is there a particular reason the image needs to be in the content or in any container?
Yeah,,,having the image scale sort of defeat the point of having a wrapper.
Why not just take it out of the content?
http://codepen.io/anon/pen/KaewC
@Paulie_D That's pretty much what I'm looking, except with a wrapper that keeps the rest of the content (sans the images) centered. Know of a way around that?
Nope.
@Paulie_D :(
I can do this give me a second.
Woot! I thought I might have opened my mouth to soon but I got it. Link -> http://codepen.io/anon/pen/hIpyE
@Schwarttzy Fantastic solution! But do you know a way of keeping the container a fixed width? i.e. 960px
Sorry not possible, the image is dependent on that width. I suggest you forget about 960px... and look into percentages because they work much better.