在引导转盘中以最小高度将图像居中

Question

我正在使用引导旋转木马，并试图在其中保持一个图像，以保持居中，当窗口被重新调整大小（特别是。

原始图像为1600 x 600。在大多数情况下，我希望它能填满整个页面。但是，当它缩小到移动（或类似iPad）的尺寸时，我希望它的最小尺寸为800 x 300，并在旋转木马中居中。

我尝试了以下方法，但有两件事发生了：

>

图像没有居中。它保持向左对齐，向右收割。

图像奇怪地在转换之间“跳跃”。就在转换发生之前，图像似乎快速移动，然后转换。

以下是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>

我还尝试了以下链接中的项目，但它们对我无效：

使Bootstrap的旋转木马居中且响应灵敏？

Answer 1

我使用了这个解决方案：在隐藏溢出的较小div中居中一个未知大小的大图像

这将使图像居中。

Answer 2

使用透明的. 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