如何让大块文字与大小可变的图像对齐？

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>