サイズが変わる画像にテキストの塊を整列させる方法は？

Question

私は、一度に1つずつ、様々なサイズの画像を扱うサイトを構築しようとしています。そのサイズは、親divによって中央に置かれ、サイズが制限され、サイズ比を維持するためにサイズ変更されます。

#grandparent { 
 
\t display: block; 
 
\t position: fixed; 
 
     width: 70vw; 
 
     height: 85vh; 
 
     top: 10vh; 
 
     left: 15vw; 
 
\t } 
 
\t 
 
.parent { 
 
\t position: relative; 
 
\t display: block; 
 
\t width: 100%; \t 
 
\t height: 70vh; 
 
\t } 
 
    
 
.resizedimage { 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t display: block; 
 
\t margin: auto; 
 
\t }

<div id="grandparent"> 
 
\t <div class="parent"> 
 
\t \t <img src="1.jpg" class="imageprime"> 
 
\t  <div class="description">Words<br>more words</div> 
 
\t </div> 
 
</div>

私は、以下の記述は、最大幅が制約されているものです時に、それは現在ありません画像の左下、下に固執したいのですが、最大の高さがされているとき拘束されていると、画像の左側を通過します。私はそれらを一直線に保つ方法を理解できません！

私が見てきたすべての方法は、コンテナdivを50％に移動してから-50％に戻すことを中心にしています。しかし、私が動的に幅と高さを決めるイメージに依存するので、私はそれをコンテナのdivに、あるいは単に下のテキストにどのように変換するのか分かりません！

Answer 1

これは画像でサイズが変更される容器がposition: relativeで、内容がposition: absoluteであるようにする必要があります。そのため、コンテナの位置は画像のサイズになります。このような何か：

#grandparent { 
 
    display: block; 
 
    position: fixed; 
 
    width: 70vw; 
 
    height: 85vh; 
 
    top: 10vh; 
 
    left: 15vw; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: 70vh; 
 
} 
 

 
.image-container { 
 
    display: block; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
.resizedimage { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
.description { 
 
    position: absolute; 
 
    left: 5px; 
 
    bottom: 5px; 
 
    
 
}

<div id="grandparent"> 
 
    \t <div class="parent"> 
 
     <div class="image-container"> 
 
    \t \t <img src="https://dummyimage.com/300x200/347508/000000.png" class="resizedimage"> 
 
    \t  <div class="description">Words<br>more words</div> 
 
     </div> 
 
    \t </div> 
 
    </div>