How can we get this technique to work such that the parent has a 'flexible' height for responsive behavior?

I need to use this technique with <img> (need to put in as HTML content), and I also need there to be responsive behavior.

Therefore, the relatively positioned parent, needs to be able to adjust its height with relation to the height of it's tallest child and/or in relation to the height of the container.

Something like this:

.carousel { background: #dfe2e4; background: url(../images/bg/port-bg.png) no-repeat top center; background-size: contain; margin: 4px; min-height: 221px; position: relative; }

.carousel img { margin: auto; width: 100%; /* 'Absolute' centering. */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }