旋转木马中图像的 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 fiddle :

http://jsfiddle.net/h82ajq0c/