在 Angular-UI-Bootstrap 中修复轮播容器大小

Question

我在我的项目中使用Angular-UI-Bootstrap。在轮播中，我必须加载不同尺寸的图像，有些比容器大，有些比容器小。如何固定轮播容器的大小，以使轮播在每次加载新图像时都不会调整大小，而加载的图像可以适合容器并保持其原始比例？

<div style="height:305px;">
    <carousel interval="carousel_interval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{slide.text}}</p>
            </div>
        </slide>
    </carousel>
</div>

目前，我正在使用从Angular-UI-Bootstrap carousel section 的示例中提取的代码。它不起作用，因为我正在加载各种尺寸的图像。

代码在 Google Chrome 版本 38.0.2125.122 m 上测试。

Answer 1

<div class="col-md-6">
    <carousel interval="carousel_interval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="max-height:300px; margin:0 auto;">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{slide.text}}</p>
            </div>
        </slide>
    </carousel>
</div>

我在最顶部的div 元素中使用了col-md-6，并将style="max-height:300px; margin:0 auto;" 应用于img 元素。

现在，不同尺寸的图片可以很好地融入轮播。