best fit img with caption into element - html

Question

Building an image slideshow, I have a container div of arbitrary size and aspect ratio into which I have to best fit an image, centred, with a caption overlayed at the bottom of the image and fitting its width. My best solution to date is to contain the image and the caption in a child element of the container but I'm having trouble centring it. This should be such a simple thing that I can't believe it's not staring me in the face but I can't see it. The code below uses a portrait format image but I need it to handle landscape also. I'm using React so jQuery is out.
.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

Update your code like below:
.container {
width: 80%;
height: 48vw;
/* 4:3 */
margin: 5px auto;
text-align: center;
}
.img-wrap {
background-color: #efe;
height: 100%;
display: inline-block;
position: relative;
}
img {
max-width: 100%;
height: 100%;
display: block;
object-fit: contain; /*or cover if you want to cover all the area*/
object-position: bottom;
}
.caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/400/600.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/600/300.jpg">
<div class="caption">Caption Content</div>
</div>
</div>

Answer 2

don't position absolute the image,
also if the caption is the sibling of the image,
set the size of the parent and set the image as 100% if the parent's width and height
then you can simply use the text-align: center on the caption to center it.
edit :
keep the existing style of a caption for positioning
fiddle : https://jsfiddle.net/hellooutlook/6ep4Lofz/4/