在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轮播部分的示例中提取的代码.它不起作用,因为我加载各种尺寸的图像.

该代码在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>

我用col-md-6在最上面的div元件并且施加style="max-height:300px; margin:0 auto;"到所述img元件.

现在,不同尺寸的图像可以很好地适应旋转木马.