html - 仅使用 css 将图像从父 中分离出来

Question

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

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

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

我想，您想要的是，您的段落始终位于图片下方。

并且由于您已经制作了 img position:absolute，它的行为将独立于它的父 div。这就是为什么该段落在 h1 标记之后呈现的原因。

此外，通过设置 position:absolute 元素的 margin 值或 padding 进行固定对您没有多大帮助，因为您永远无法分辨宽度和大小您的图像可以与各种分辨率(包括 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

好处:

1. 这将适用于所有分辨率。

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

3. 现在我已经给img设置了很高的值，你只需要将img的高度和宽度设置为100%，这样它就可以保持原样了。

它应该可以工作。如果没有告诉我