html - 如何使一大块文本与大小可变的图像对齐？

Question

因此，我正在尝试构建一个网站，其中包含各种不同大小的图像，一次一张，这些图像居中且大小受父 div 限制，然后调整大小以保持其比例。

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

<div id="grandparent">
	<div class="parent">
		<img src="1.jpg" class="imageprime">
	    <div class="description">Words<br>more words</div>
	</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">
    	<div class="parent">
        <div class="image-container">
    		<img src="https://dummyimage.com/300x200/347508/000000.png" class="resizedimage">
    	    <div class="description">Words<br>more words</div>
        </div>
    	</div>
    </div>