css - 修复 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 元素。

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