Question

我需要一个图像来调整浏览器的大小，但我还需要它保持在它所在的div的底部。它还需要在div中居。

这是我的HTML：

    <div id="logo">
       <img src="/images/logo_2016.jpg"> 
    </div>

这是我的CSS

#logo {
    position:absolute;
    max-height: 200px;
    height: 200px;
    width: 100%;
    bottom: 0px;
    left 0px;
    background-color:blue;
}

#logo img {
    position: relative;
    margin: auto;
    display: block;
    max-width: 800px;
    width: 100%;
}

我正在使用＆＃34;职位：亲属＆＃34;对于图像，它可以以＆＃34; margin：auto＆＃34;为中心。调整浏览器大小后，图像会相应缩小，但它也会保留在div的顶部。我需要它来调整大小并保持在div的底部。

如何实现居中，调整大小并保持在最底层？

Answer 1

容器必须具有position：relative和child position：absolute - 而不是相反：

<div style="position:relative;height:200px"> <img src="https://jsfiddle.net/img/logo.png" style="position:absolute;left:50%;bottom:0;margin-left:-22px;"/> </div>

margin-left的值是图像宽度的一半。

示例：https://jsfiddle.net/kbfrufr2/1/

<强>更新如果父容器必须具有position：absolute，则必须引入一个包装器，即position：relative：

https://jsfiddle.net/wgLq1yaa/

@cale_b：百分比和绝对值的混合是必要的，因为25％将是容器的25％ - 而不是img-tag

Answer 2

添加底部：0;到#logo img css应该将它放在#logo div

的底部

如何在调整大小时让我的图像停留在div的底部？

2 个答案: