How to equalize the height of different images in fluid layout?

Question

css

There is a preview of the video, previews of different sizes can have aspect ratios, etc.
Because of this, blocks jump, do not fit.
Layout on bootstrap3.
How to make the blocks be rubber, but the aspect ratio was preserved for pictures 16 * 9.
https://yadi.sk/i/0ZtP5ywUc8ey5 - screen
up.lifefilm.ru/newfilms.html

<div class="col-sm-6">
<div class="panel panel-default">
    
    <div class="panel-thumbnail">
        <a href="/f/almaz_boln">
        <img src="http://124002.selcdn.com/film/2/almaz_boln.mp4.jpg" width="100%" class="img-responsive">
        </a>

  </div>


    <div class="panel-body">
    

        <div class="col-sm-5">
        
                    <div class="outeravatar pull-left">
                        <div class="inneravatar">
                           <a href="/u/2">
                               <img src="http://cs614825.vk.me/v614825550/ae98/MLNlY--5q3Y.jpg?s=50" alt="fortunato" title="Рустам " class="miniavatar">
                          </a>
                          </div>
                    </div>
                    <a href="/u/2" class="small">Рустам </a>
                    <br>
                   <span class="dateavatar">18 October 2014</span>
                   

              
        </div>  

        <div class="col-sm-7 ">
            <h4><a href="/f/almaz_boln">Алмаз в Больнице</a></h4>
        </div> 
           
    </div>
     
</div>
</div>

Answer 1

I can advise you magic with padding-bottom.

.img-preview {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 56.25% //16*9
}