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


Tags: image,html5,css3

Problem :

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/



Solution :

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/


    CSS Howto..

    How can I add read more click event to only open one news article?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How to disable inline CSS position attribute

    How to fix and re-arrange fixed position divs

    How to add arrow beside some links in CSS?

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

    Best practice: how to name css default state? [closed]

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How do I auto play my slideshow

    How to convert a .PNG file into a source code that can be stored into mysql and called up via CSS as “png”

    Bootstrap with Picture Slideshow

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    CSS how to push text away from border

    Responsive Design - how to get my image on left to take up whole screen

    How to get a background image to print using css?

    How to compile sass / scss without creating map files

    How can I wrap a page with a centered DIV?

    slideshow banner without using flash

    How can i add dotted line in front of menu

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    How do I set a different background to current tab?

    How do I display content in a way like UICollectionView on the web?

    how to add inline css to rails link_to helper

    CSS: How to move contents of one div into another one

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    how decrease font size?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    how to apply two classes of css on same element?

    How to host html files like css and javascript files