Question

问题是，当窗口调整为宽度较短时，图像开始变形......

代码： 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;
}

欢迎任何想法来解决这个问题。我只是希望整个图像变得更小（包括caroussel盒子）。

Answer 1

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

我将你的小提琴分到http://jsfiddle.net/ybsvvczh/并更改了以下内容：

从HTML和CSS中删除了CSS类img-responsive-height
从HTML和CSS中删除了CSS类height-test
从height: 100%;

.carousel

将CSS类carousel-inner添加到HTML和CSS

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

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

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

1 个答案: