i want my image size to be larger than my div size

Question

I have a div that is a specific width (80%) and i have an image in that div. i want the image to stretch to 100% of the page, which would overflow the 80% div. how can i do this. would i set the image width to 140% ? i dont know how to go over the containing div that the image is in. i have tried using VW and float, and various positioning, but no luck yet.i want the image above everything else and not inside or behind.

<section style="background:linear-gradient(#F5F1FD 70%, #ffffff 30%);">
    <div id="bigbtn" class='bigbtn' style="height:800px; width:1600px; overflow:hidden; cursor:pointer;">
        <div style="width:2400px; height:800px; float:left; position:absolute;" id="clkcont" class="clkcont">
            <div id="bgdsply2" style="float: left; display: inline-block; height:800px; width: 1600px;">
                <img src="admin/showroom/clocks/<?php echo $filename ?>" style="width:1600px; height:800px;" alt="" id="bigclk"/>
            </div>
            <div style="display: inline-block; width: 300px; margin-top: 200px; margin-left: 200px;">
                Quo ne facer impedit euripidis, inermis nonumes vis ex, fabulas menandri postulant ad nam. Animal disputationi ad qui, case natum cotidieque ei mel, et diam prima posse vel. Usu admodum lobortis inciderint eu, oratio tritani et vis, ea eum nemore deseruisse. Dicam conceptam interpretaris sed ea. Ex mei everti abhorreant disputationi.
            </div>
        </div>
    </div>
</section>

"section" is set to 80%width. bigbtn i want to reach the left side of the visible bvrowser window and the right side also, so it will reach across 100% of the visible window while the rest of the page is at 80% width. so far no solutions have worked

Questions seeking code help must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Aug 11 '15 at 19:01
I'm not sure what you are *exactly* trying to do but this might help- http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Aug 11 '15 at 19:02

score 0 · Answer 1 · answered Aug 11 '15 at 19:15

0

I don't know if it's what you want but:

<style>
    div {
        width:80%;
    }
    img {
        width: 100%; 
        position: absolute;
    }
</style>

<div>
    <img src="/img/foo.jpg">
</div>

Let me know if it solves your issue.

answered Aug 11 '15 at 19:15

a.barbieri

2,398
3
30
58

score 0 · Answer 2 · answered Aug 11 '15 at 19:22

0

You can set the width of the image in pixels, and (assuming that pixel value is wider than the width of the div) the image will overflow.

Check out This fiddle:

body { width: 500px; }
div {
    border: solid gray 1px;
    width: 80%;
}

img { width: 500px; }

answered Aug 11 '15 at 19:22

jennEDVT

709
9
13

its still inside the border of the "section" div. which is 80%. – peter Aug 11 '15 at 19:49

i want my image size to be larger than my div size

2 Answers2