最适合带有字幕的img

Question

[制作图像幻灯片，我有一个容器div，它具有任意大小和宽高比，我必须将容器最适合放入其中，并使其居中，并在图像底部覆盖一个标题并适合其宽度。迄今为止，我最好的解决方案是将图像和标题包含在容器的子元素中，但是在居中时遇到了麻烦。这应该是一件很简单的事情，我无法相信它没有盯着我，但我看不到它。下面的代码使用人像格式的图像，但我也需要使用它来处理风景。我正在使用React，所以jQuery退出了。

		.container {
			position: relative;
			width: 80%;
			height: 48vw;		/* 4:3 */
			margin: 0 auto;
			display: flex;
			justify-content: center;
		}
		.img-wrap {
			background-color: #efe;
		}
		img {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
		}
		.caption{
			position: absolute;
			bottom: 0;
			color: #fff;
			background-color: rgba(153, 153, 153, 0.541)
		}

<div class="container">
		<div class="img-wrap">
			<img src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-aesthetic-aurora-night-sky-background-skystarry-skystarnight-viewbackgroundstar-image_87582.jpg" height="1600px">
			<div class="caption">Caption Content</div>
		</div>
	</div>

Answer 1

不position absolute图像，

同样，如果标题是图像的同级，

Answer 2

如下更新代码：