Fixed col-xs?

Question

css

There are two rectangular blocks on which images are placed:

<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>

When the window is scaled (reduced), the following happens:

What is the best way to fix this?

Answer 1

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

Answer 2

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

Answer 3

set the height of the image and the height of the block in relative units vw
100vw - equal to the size of the screen
When the size decreases, the height of the block will also decrease