Несколько адаптивных баннеров рядом, подскажите как?

Вот выдернул из подобного примера:

bootstrap...

<div class="col-main col-xs-12 col-sm-9">

    <div class="banner-static-top">

        <div class="row">

            <div class="col-sm-7 col-sms-12">

                <div class="banner-box baner-box1">

                    <div class="banner-box-inner baner-box-inner1">

                        <a href="#">

                            <img alt="" src="http://demo4plazathemes.com/19/ma_galio/media/wysiwyg/banner_static_top1.jpg"/>

                        </a>

                    </div>

                    <div class="banner-box-inner baner-box-inner2">

                        <a href="#">

                            <img alt="" src="http://demo4plazathemes.com/19/ma_galio/media/wysiwyg/banner_static_top2.jpg"/>

                        </a>

                    </div>

                </div>

            </div>

            <div class="col-sm-5 col-sms-12">

                <div class="banner-box baner-box2">

                    <div class="banner-box-inner baner-box-inner3">

                        <a href="http://demo4plazathemes.com/19/ma_galio/index.php/smart-phone.html">

                            <img alt="" src="http://demo4plazathemes.com/19/ma_galio/media/wysiwyg/banner_static_top3.jpg"/>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Вариант подходит, но есть одно но, при увеличении разрешения - обрезаются изображения( Как сделать что бы изображение тоже уменьшалось?

---------- Добавлено 14.03.2016 в 21:14 ----------

Вот к примеру тут реализация такая как надо https://corsocomo.com/