Фиксированный col-xs?

Question

[XenK]

Есть два прямоугольных блока, на которых размещены изображения:

<div class="col-xs-2">
    <section class="container1">
        <div class="cm">
            <figure class="front">
                <img src="/img/bg.png" class="img-img" alt="">
            </figure>
            <figure class="back">
                <img class="img-img2" src="/img/dog.png" alt="">
            </figure>
        </div>
    </section>
</div>

При масштабировании окна (уменьшении), происходит следующее:


Как это лучше всего поправить?

Answer 1

[Никита]

<img src="/img/bg.png" class="img-responsive" alt="">

Comments

[XenK]

Никита: не помогло.

Answer 2

[Максим Тимофеев]

img {max-width: 100%; height:auto;}

Answer 3

[Юрий Олиярнык]

задай высоту картинки и высоту блок в относительных еденицах vw
100vw - равно размеру екрана
При уменьшении размера будет уменьшатся и высота блока