我希望我的图片大小大于我的div大小

时间:2015-08-11 18:55:25

标签: html css

我有一个特定宽度的div(80%),我在该div中有一个图像。我希望图像延伸到页面的100%,这将溢出80%div。我怎样才能做到这一点。我会将图像宽度设置为140%吗?我不知道如何查看图像所在的包含div。我尝试过使用大众和浮动,以及各种定位,但没有运气。我希望图像高于一切,而不是在内部或后面。

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

&#34;节&#34;设置为80%宽度。 bigbtn我想要到达可见的bvrowser窗口的左侧和右侧,所以它将达到100%的可见窗口,而页面的其余部分的宽度为80%。到目前为止还没有解决方案起作用

2 个答案:

答案 0 :(得分:0)

我不知道你想要的是什么,但是:

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

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

如果它能解决您的问题,请告诉我。

答案 1 :(得分:0)

您可以设置图像的宽度(以像素为单位),并且(假设像素值宽于div的宽度)图像将溢出。

结帐This fiddle

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

img { width: 500px; }