2

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

使用position:absolute;对图像有正确的影响，但下面的<p></p>内容会在图像下方上升。

图像突破父 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;
    }

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

4

3 回答 3

3

我想，你想要的是，你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;
    }

小提琴

好处：

  1. 这将适用于所有决议。

  2. 您的段落容器将根据 img 高度定位自己；

  3. 现在，我为 img 赋予了一个非常高的值，您所要做的就是将 img 的高度和宽度设置为 100%，使其保持原始状态。

它应该工作。告诉我是否没有

于 2013-03-10T17:56:21.480 回答
0

好的，我想你可以在div? 你可以拥有图像的最大尺寸吗？如果是这样，请尝试此解决方案。

基本上，我将 div 设置为width:500px并将 figure 设置为700px. 现在，这个数字200px比它的容器（100px每一边）都大，所以我把这个数字移到左边100px（这不是优雅的解决方案，因为你应该避免负边距，但我不得不将它用于演示目的），然后我把 center align 放在图。这将始终将图像放在图形的中间。我希望这是有道理的！

于 2013-03-10T17:37:09.470 回答
0

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将使文本保留在图像下方。代替margin: 0 0 0 -10%,left: -10%也可以。

于 2013-03-10T18:03:36.700 回答