Bootstrap图像溢出页面

Question

在page上，我插入了一张溢出的图像。我正在使用Bootstrap，image-responsive似乎没有使图像成为正确的高度。此外，我不想明确更改图像的高度或更改文本的大小以适合图像。如果有帮助，图像将被放置在模态中。

HTML：

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">

        <div class="header">
            <h1 class="header-primary">
                <em>The Chrysalids</em> by John Wyndham
            </h1>
            <h1 class="header-primary-subheader">
                Novel Study
            </h1>
        </div>

        <img class="img-responsive mx-auto img" src="https://s-media-cache-ak0.pinimg.com/originals/69/b3/d3/69b3d30e9a7c7245ba8f8262973597f7.jpg" alt="Cover">

        <div class="close-Btn text-center">
            <button id="close-Btn" class="btn btn-primary btn-lg">Begin</button>
        </div>

    </div>
</div>

CSS：

.img {
    display: block;
    margin: 10px 5px 5px 5px;
}

.modal {
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden; 
    background-color: #FFF;
    vertical-align: center;
}

.modal-content {
    padding: 20px; 
    border: 1px solid #888;
    width: 100%;
    height: 100%;
    background-color: #FFF;
}