在具有最小高度的引导轮播中将图像居中

Question

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

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

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

1. 图像未居中。它保持向左对齐并向右裁剪。

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

这是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

这会使图像居中。