Question

我正在使用Bootstrap Carousel并尝试维护其中的图像，以便在重新调整窗口大小时保持居中（尤其是移动尺寸）。

原始图像是1600 x 600.我希望它在大多数情况下填充页面的整个宽度。但是，当它降至移动（或类似iPad）尺寸时，我希望它的最小尺寸为800 x 300并且在旋转木马中心。

我已尝试过以下但有两件事情发生了：

图像不居中。它保持与左边对齐并向右移动。
图像很奇怪＆＃34;跳跃＆＃34;转换之间。在转换发生之前，图像似乎快速/快速地移动然后转换。

这里是css和html：

    .carousel-inner img {
        width: 100%; max-height: 1800px; 
        min-height: 300px; min-width: 800px; overflow:hidden;
    }

    <div id="CarouselHome" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img-1.jpg"">
            </div>
            <div class="item">
                <img src="img-2.jpg"">
            </div>
            <div class="item">
                <img src="img-3.jpg"">
            </div>
        </div>
    </div>

我也尝试了以下链接中的项目，但它们对我不起作用：

Make Bootstrap's Carousel both center AND responsive?

Answer 1

使用透明的.png或.gif作为幻灯片图像，然后使用css为每个幻灯片图像设置背景图像的样式。对于手机/平板电脑，请在css中使用媒体查询来更改背景大小。确保背景图像与透明背景图像的大小相同。

透明图像将在浏览器调整大小时保持其纵横比，从而保持旋转木马的宽高比。

为每个项添加一个类名，并在定义背景图像时在css中使用它。

.item img {
  background:url(path-to-image) no-repeat center center;
  background-size:100% auto;
}
@media(max-width:800px){
  .item img {
    background-size:800px 300px;
    min-height: 300px; 
  } 
}

http://codepen.io/partypete25/pen/mPaJWb

Answer 2

我使用过这个解决方案：Center a large image of unknown size inside a smaller div with overflow hidden

这使图像居中。

将图像置于具有最小高度的Bootstrap Carousel中

2 个答案: