How to make the bootstrap slider image not fall out of the block?

Question

css

Hello! There is a bootstrap slider, the parent block has a height of 700px (according to the layout, the height should be 700px), pictures of different heights and those that fall out of the block more and break everything. How to make sure that this does not happen and at the same time maintain adaptability?

<div class="slider">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="css/img/austria.jpg" alt="austia">
                </div>
                <div class="item">
                    <img src="css/img/wood.png" alt="wood">
                </div>
                <div class="item">
                    <img src="css/img/ball_mounts.jpg" alt="ball_mounts">
                </div>
                <div class="item">
                    <img src="css/img/river.jpg" alt="river">
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

CSS that I assigned.

.slider {
    position: relative;
    max-width: 1600px;
    text-align: center;
    max-height: 700px;
    margin: 0 auto;
    margin-top: 4px;
}
.slider img {
    height: auto;
    max-width: 100%;
    width: auto;
}

Answer 1

try adding img-responsive class to img tags,

<img class="img-responsive" src="css/img/austria.jpg" alt="austia">