CSS-center alignment for image in ng-repeat carousel
I am using a carousel to display images, but I would like to serve it up for all types of image sizes that the user uploads. I have resized all the images before displaying them in the carousel, but I can't seem to do it in the center. I've tried margin: auto / text-align: center in either li tag or img tag , but it doesn't seem to work for me. Below are some examples of the carousel showing the empty spaces and the image should appear in the center.
Image is limited to width
The image is constrained by the height
What I wanted to achieve here was to make the images to be displayed in the center either bounded by width or height. This is how my images look like
<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 this is my CSS setting
.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 help me .. Thanks.
source to share
Make the following changes to your 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
must be set in position: relative;
to allow img
positioning relative to it. Height
must be specifically set to li
for this to work. text-align: center;
is fallback for older browsers to at least center img
horizontally. Setting up position: absolute;
, margin: auto;
and bottom
, left
, right
and top
on 0
is what makes the center img
in li
.
JS Fiddle:
source to share