text overlay not sizing with flexbox - html

Question

I have a flexbox with a text overlay on top and everything looks fine when the browser is full width:
However, when I shrink the browser to smaller width, the overlay becomes wider than the image:
My HTML looks like this:
<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}">
<img src="{{::options.picture}}" alt="" width="100%" height="100%"/>
<h3><span>{{::options.title}}</span></h3>
</a>
And my CSS looks like this:
a.picture {
position: relative;
//width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
What am I missing from my CSS so that the overlay "locks" in with the image? Thanks!

Answer 1

Set the width of parent container equal to the image size.
a.picture {
position: relative;
width: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
<a class="picture">
<img src="https://static.pexels.com/photos/1510/road-sky-sand-street.jpg" width="100%" height="100%"/>
<h3><span>Content</span></h3>
</a>