将图像与响应式容器底部对齐

我正在尝试将图像与容器底部对齐。但是,由于网站是响应式的,当我更改窗口大小时,图像会在容器上上下移动,因为它似乎固定在页面上的某个点上。

有没有办法将图像的基线无限期地固定到容器的基线?本质上,图像一开始就与底部对齐,但是当窗口接触时,文本会强制容器展开,我最终会在图像下方出现空白。

我的图像 div 的 CSS 如下:

.floatbottom {

height: 100%;
position: absolute;
bottom:0;
width: 500px;

}

父容器的 CSS:

#box{ 

height: auto;
padding-top: 90px;
padding-bottom: 90px;
position: relative;

}

容器中图像的 HTML:

<div id="box">
    <div class="floatbottom">
        <img src="/images/bottom.png">
    </div>
</div>

任何想法将不胜感激!

stack overflow Align image to bottom of responsive container
原文答案

答案:

作者头像
 <div class="container">
     <div class="content"></div>
     <div class="floatbottom"></div>
 </div>

并将内容的css,高度设置为自动;和容器高度也自动

作者头像

在这种情况下,您可以使用 line-height 组合。当您缩放窗口时,您不需要使用有问题的绝对位置。如果您需要动态更改容器高度,可以使用@media-query 来实现。

例如一些小提琴: http://jsfiddle.net/Hxytw/