html - Bootstrap 轮播固定高度但不应扭曲图像

Question

这就是问题所在，当窗口的宽度调整为较短时，图像开始扭曲......

fiddle :http://jsfiddle.net/1juLc9ub/

代码:HTML

    <div class="search-results panel-body">
    <div class="outer-listings-container row-space-8">
        <div class="row row-condensed listings-container">
            <div class="col-6 row-space-1" data-id="1">
                <div class="result">
                    <div class="panel-image listing-img">
                        <div id="1" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">   <a class="center-block" href="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg">
                                                <div class="center-block height-test">
                                                    <img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive center-block img-responsive-height">
                                                </div>
                                            </a>

                                </div>
                            </div>
                        </div>
                        <div>   <a class="left carousel-control height-test" id="1" href="#1" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>

                        </div>
                        <div>   <a class="right carousel-control height-test" id="1" href="#1" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                        <span class="sr-only">Next</span>
                                    </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

    .listing-img {
    padding-bottom: 0;
    padding-top: 0;
}
.panel-image {
    position: relative;
}
.img-responsive-height {
    width: auto;
    height: 100%;
}
.height-test {
    height: 350px;
}
.row-space-8 {
    margin-bottom: 50px;
}
.row-condensed {
    margin-left: -6.25px;
    margin-right: -6.25px;
}
.listings-container > .col-6 {
    width: 50%;
}
.row-condensed > .col-1, .row-condensed > .col-2, .row-condensed > .col-3, .row-condensed > .col-4, .row-condensed > .col-5, .row-condensed > .col-6, .row-condensed > .col-7, .row-condensed > .col-8, .row-condensed > .col-9, .row-condensed > .col-10, .row-condensed > .col-11, .row-condensed > .col-12 {
    padding-left: 6.25px;
    padding-right: 6.25px;
}
.row > .col-1, .row > .col-2, .row > .col-3, .row > .col-4, .row > .col-5, .row > .col-6, .row > .col-7, .row > .col-8, .row > .col-9, .row > .col-10, .row > .col-11, .row > .col-12 {
    padding-left: 12.5px;
    padding-right: 12.5px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    position: relative;
    min-height: 1px;
}
.row-space-1 {
    margin-bottom: 6.25px;
}
.panel-overlay-listing-label {
    bottom: 30px;
    left: 0px;
    padding: 7px 10px;
}
.panel-overlay-label {
    background-color: rgba(121, 173, 161, 0.8);
    padding: 10px;
    color: #FFF;
}
.panel-overlay-bottom-left {
    bottom: 15px;
    left: 15px;
    width: 40%;
}
.carousel {
    height: 100%;
    margin-bottom: 0px;
}
.a-responsive {
    margin-left: auto;
    margin-right: auto;
}
.carousel-control.right {
    background-image: none;
}
.carousel-control.left {
    background-image: none;
}
.panel-body-result {
    padding-top: 0;
}

欢迎提出解决该问题的任何想法。我只想让整个图像变小(包括轮播框)。

Answer 1

根据您的代码，我猜您希望整个旋转木马都能响应。这意味着图像和轮播都需要根据可用的屏幕尺寸调整大小。

我将你的 fiddle fork 到 http://jsfiddle.net/ybsvvczh/并更改了以下内容:

• 从 HTML 和 CSS 中删除了 CSS 类 img-responsive-height
• 从 HTML 和 CSS 中删除了 CSS 类 height-test
• 从 .carousel 中删除了 height: 100%;
• 在 HTML 和 CSS 中添加了 CSS 类 carousel-inner

最相关的部分是 carousel-inner CSS 类:

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}