CSS-Center alignment for image in a carousel ng-repeat

Question

I am using carousel for image display but I would like to cater it for all types of image dimension a user upload. I resized all images before displaying it in a carousel but i cant seem to make in into center. I have tried margin:auto / text-align:center either in the li tag or img tag but it doesn't seem to work for me. Below are some samples of the carousel showing empty spaces and the image should be displayed in the center.

Image restrained by width

Image restrained by height

What i wanted to achieve here is to make the images to display in the center either it is restrained by width or height. This is how my images are rendered

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

And these are my CSS customization

.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;
}

here is the JSFiddle link

Hope someone can give me some assistance.. Thank You

Answer 1

Make the following changes to 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;
}

In short the container (li) around each img needs to be set to position: relative; to allow the img to be positioned relative to it. Height needs to be specifically set on the li for this to work. text-align: center; is a fallback for older browsers to at least center the img horizontally. Setting position: absolute;, margin: auto; and bottom, left, right and top to 0 is what makes the img center in the li.

JS Fiddle:

http://jsfiddle.net/h82ajq0c/