When narrowing the browser, pictures crawl out of the blocks, how to fix this?

Question

Bootstrap

Good afternoon, when narrowing the browser, pictures crawl out of the blocks, tell me how to fix this?
bootstrap layout

<div class="row">
                        <div class="col-md-8">
                            <div id="format_text"></div>
                            <div id="picture-paper" class="css-adaptive calc-box" style="height:460px">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div id="side1_text">Сторона 1</div>
                            <div id="picture-color1" class="css-adaptive calc-box" style="height:222px"></div>
                            <div id="side2_text">Сторона 2</div>
                            <div id="picture-color2" class="css-adaptive calc-box" style="height:222px"></div>
                        </div>
                    </div>

Answer 1

for such cases, bootstrap has a class img-responsivethat is usually hung on an element img
or done "by hand"

{
    width:100%;
    height: auto;
}