Bootstrap - как уменьшить масштаб изображения, чтобы оно соответствовало высоте окна?

Как сделать так, чтобы высота переполнения изображения реагировала?

Изображения, которые у меня есть, иногда имеют большую высоту, что делает полосу прокрутки окна видимой.

Поэтому я хочу, чтобы эти высоты реагировали - чтобы изображение уменьшалось, чтобы соответствовать высоте окна.

Является ли это возможным?

CSS,

 html, body {
    height: 100%;
    margin: 0;
    padding: 0 0;
    border: 4px solid black;
}

.container-fluid {
    height: 100%;
    display: table;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    border: 4px solid blue;
}

.row-fluid {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 100%;

    border: 4px solid red;
}

.centering {
    float: none;
    margin: 0 auto;
}

HTML,

<div class="container-fluid">
    <div class="row-fluid text-center">
        <div>
            <img src="images/xxx.jpg" class="img-responsive centering">
        </div>
    </div>
</div>