Как в резиновой верстке выровнить высоту разных картинок?

Question

[Рустам Салаватов]

Есть превью видео, у превью разные размеры могут быть соотношения сторон и тп.
Из-за этого прыгают блоки, не влезают.
Верстка на bootstrap3.
Как сделать чтоб блоки были резиновыми, но соотношение сторон сохранялось у картинок 16*9.
https://yadi.sk/i/0ZtP5ywUc8ey5 - скрин
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

[Сергей Протько]

могу посоветовать вам магию с padding-bottom.

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

Comments

[Рустам Салаватов]

круто работает) не знал

[Евгений Петров]

То, что margin. padding и width рассчитываются от ширины контейнера, написано в спецификации.

[Сергей Протько]

@Petroveg я вас умоляю, кто в наги дни читает спецификацию?)

[Евгений Петров]

@Fesor умоляй, мне это нравится:)
В России не читают, увы. Сплошь и рядом говнокодеры на jQuery и Bootstrap.