轮播中图像的 CSS 中心对齐 ng-repeat

Question

我正在使用轮播来显示图像，但我想为用户上传的所有类型的图像尺寸提供它。我在轮播中显示之前调整了所有图像的大小，但我似乎无法进入中心。我在 li 标签或 img 标签中尝试过 ma​​rgin:auto / text-align:center 但它似乎对我不起作用。下面是一些显示空白的轮播示例，图像应显示在中心。

图像受宽度限制

图像受高度限制

我想在这里实现的是使图像显示在中心，要么受到宽度或高度的限制。这就是我的图像的渲染方式

<div class="fanpageCarousel" ng-controller="FanCarouselCtrl"
ng-init="getImage()">
<ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3"
    rn-carousel-pause-on-hover="true">
    <li ng-repeat="image in slides"><img ng-src="{{image.src}}" /></li>
</ul>

这些是我的 CSS 自定义

.fanpageCarousel{
  position: relative;
  margin: auto;
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  max-width: 800px;
  max-height: 450px;
  border-radius: 4px;
}

.fanpageCarousel img{
  max-width: 100%;
  max-height: 400px;
}

这里是JSFiddle 链接

希望有人能给我一些帮助..谢谢

Answer 1

对 CSS 进行以下更改：

.fanpageCarousel img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.fanpageCarousel li {
    height: 450px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

简而言之，每个 img 周围的容器 (li) 需要设置为 position: relative; 以允许 img 相对于它定位。 Height 需要在 li 上专门设置才能正常工作。 text-align: center; 是旧版浏览器的后备方案，至少水平居中 img。将position: absolute;、margin: auto; 和bottom、left、right 和top 设置为0 是使img 在li 中居中的原因。

JS 小提琴：

http://jsfiddle.net/h82ajq0c/