Question

我想打破父div的图像。我遇到的主要问题是我不知道原始图像的宽度或高度。我也无法使用任何javascript来修复它。

使用position:absolute;会对图片产生正确的影响，但下面的<p></p>内容会在图片下方显示。

Image breaking out of parent div

HTML：

    <div>
        <h1>Some Title</h1>
        <figure>
            <img src="someimage.jpg" />
        </figure>
        <p>Some description</p>
    </div>

CSS：

div{
    width:700px;
    }

img{
    width: 80%;
    margin: 0px 0 0 -40%;
    left: 50%;
    position: absolute;
    display: block;
    }

编辑：图像不应该比浏览器窗口宽（因此触发滚动）

Answer 1

我想，你想要的是，你的paragraph总是在图像下方。

并且由于你已经创建了你的img position:absolute，它的行为将独立于它的父div。这就是段落在h1标签之后呈现的原因。

此外，通过设置margin元素的position:absolute值或填充的注释对您没有多大帮助，因为您无法分辨图像的宽度和大小，并与范围相结合决议（包括IE）。所以我不建议你那些临时锻炼：

在我的观点中你应该做的最好的是，改变你的布局结构：无论如何，你的img背后的内容区域是不可见的，为什么不保留三个独立的容器？并相对定位他们？

看到这个标记：

<div class="wrapper">
            <div class='header'>
                <h1>Some Title</h1>
            </div>
            <div class="image">
                <figure>
                    <img src="someimage.jpg" />
                </figure>
            </div>
            <div class="para">
                <p id="paragraph">Some description</p>
            </div>
</div>

并看到这个css：

 .header
    {
        position: relative;
        left:10%;
        width:80%;
        height: 20%;
        background-color: #CCCCCC;
        text-align: center;
    }
    .wrapper
    {
        width: 100%;
        height: auto;
    }
    .image
    {
        position: relative;
        top:20%;
        width: auto;
        background-color: #EEEEEE;
        height: auto; 
        text-align: center;
    }
    .image > figure >img
    {
        width: 1800px;
        height: 800px;
        border:1px Solid #CCCCCC;
    }
    .para
    {
        position: relative;
        left:10%;
        width:80%;
        height: 20%;
        background-color: #555555;
        text-align: center;
    }

fiddle

好处：

这适用于所有决议。
您的段落容器将根据img height定位自己;
现在，我给img一个非常高的值，你所要做的就是将img的高度和宽度设置为100％，这样它就保持原始状态。
< / LI>
它应该有用。告诉我它是否没有

Answer 2

好的，我想你可以在div上有静态宽度？你可以拥有最大尺寸的图像吗？如果是，请尝试this solution。

基本上，我将div设置为width:500px并将其设为700px。现在，这个数字比它的容器200px大一些（100px每边）所以我将图形向左移动100px（这不是优雅的解决方案，因为你应该避免负边距但是我不得不将它用于演示目的）并且我将中心对齐在图上。这将始终将图像放在图的中间。我希望它有意义！

Answer 3

<强> JSFiddle

div{
    width:700px;
    background:#000;
    position:relative;
    margin:0 auto;
    color:#fff;
    text-align:center;
}

img{
    width: 120%;
    margin: 0px 0 0 -10%;
    position: relative;
    display: block;
}

HTML保持不变。一些CSS用于示例（如背景颜色）。

无论如何，将img设置为position:relative会使文字保留在图片下方。 <{1}}取代margin: 0 0 0 -10%，而left: -10%也可以。

使用仅css </div>将图像从父<div>中分离出来

3 个答案: