please check this jsfiddle i created, it might be what you need:
I set the image to be resizable (to simulate for scalable).
The text is aligned in the center and when the image width and height are changed so is the child.
HTML:
<div class="parent">
<div class="child">
<img class="image" id="image" src="image.jpg" alt=""/>
<br/>
<div class="title">Title</div>
</div>
</div>
CSS:
.parent {
width: 66%;
}
.child {
width: auto;
height: auto;
margin: auto;
border: 1px solid black;
display: inline-block;
}
.image{
max-width: 100%;
max-height: 100%;
min-width: 50px;
min-height: 50px;
display: block;
border: 1px solid red;
}
.title{
text-align: center;
display: block;
font-style: italic;
}
Hope it helps.