コンテナの下部に画像を揃えようとしています。ただし、サイトはレスポンシブであるため、ウィンドウのサイズを変更すると、ページ上の特定のポイントに固定されているように見えるため、画像がコンテナーを上下に移動します。
イメージのベースラインをコンテナーのベースラインに無期限に固定する方法はありますか? 基本的に、画像は最初は下に配置されていますが、ウィンドウが接触すると、テキストがコンテナーに強制的に拡張され、画像の下に空白ができてしまいます。
画像 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>
どんなアイデアでも大歓迎です！