如何讓大塊文字與大小可變的圖像對齊？

Question

因此，我試圖建立一個網站，其特點是各種不同大小的圖像，一次一個，由父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>