CODEWITHSUNDEEP
imagehtmlcss
stefanie
stefanie

Reputation: 39

How to make image override parent width and stretch to browser width?

I want to insert a specific image that will override and parent width it's contained in and stretch to the width of the browser. The image should be responsive as well. I can't figure out how to do this. Is this even possible? Thank you in advance for your help!

html code:

<div id="wrapper"> <img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" /> <p>This is a test</p> </div>

css code:

#wrapper { width: 300px; margin: 0 auto; } #pic { width: 100%; }

Jsfiddle link here: http://jsfiddle.net/9Ttyh/

Upvotes: 2

Views: 1230

Answers (2)

bumerang
bumerang

Reputation: 1846

You can do it setting: min-width: 100% to the image, I hope I get You right. jsFiddle: http://jsfiddle.net/Usuz4/

#wrapper {
    width: 300px;
    margin: 0 auto;
}
img {
    min-width: 100%;
}

If You put min-width You force element to get at least provided size, and if You put 100% it has to take 100% of parent width.

Upvotes: 0

methodofaction
methodofaction

Reputation: 72385

You can't reliably achieve what you want without removing the img from the contained parent.

Your HTML would look like this:

<img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" />
<div id="wrapper">
   <p>This is a test</p>
</div>

http://jsfiddle.net/cGLeY/

Upvotes: 1

Related Questions