Center image on jQuery Slider in HTML

Question

I have an jQuery Content Slider. But i have an problem, where tall images is stretch. Isn't it possible to center the image. Some says that i need to set the overflow to hidden. But it doesn't make any differences. Best regard Morten Starck

The html code:

 <ul class="bxslider">
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/7bdfb0cc-47ec-4afa-9fc7-aa2cbb9d43a0_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/aad1d457-285d-42e3-8e68-e243bd2988d4_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/768fda69-af61-4322-a60b-012040d78384_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" onload="FixImages(true)" src="http://www.blog.designsquish.com/images/uploads/victorian-flatbush-old-hous_thumb.jpg" /></li>

And the Javascript:

<script type="text/javascript">
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
  });
</script>

and the CSS code:

#propImageSliderLarge {
  width: 530px;
  height: 400px;
  overflow: hidden; 
  position: relative;
}

Answer 1

There're two things you're doing wrong here. First, you're using the same ID for multiple elements, this isn't valid. I think you intended to use CSS classes. Second, you're setting the width and height attributes of the IMG tag, when in fact you should set these attributes on the container (in this case the LI ). Try the following:

Change your markup to this

<li class="propImageSliderLarge">
    <img src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/>
</li>

Change your CSS to this

.propImageSliderLarge {
    width: 530px;
    height: 400px;
    overflow: hidden; 
    position: relative;
    text-align: center; /* this will centre your image in the LI */
}

Update the image dimension if larger than LI container

This script assumes variables set for containerWidth and containerHeight so just set these to whatever your LI container size is and it'll resize the images to the max constraints of the container so you can see the entire image.

function resizeImage(img) {
    var imgWidth = parseInt($(img).width());
    var imgHeight = parseInt($(img).height()); 

    if (imgWidth > containerWidth || imgHeight > containerHeight) {
        $(img).width(containerWidth);
        $(img).height(containerHeight);
    }
}​

Answer 2

First, change the attribute id to attribute class. Id means Identifier, and as the name goes, two things cannot have same identifier. To center the images, give an id to ul tag and add following css:

text-align: center;

Try this...not sure if it'll work.

Answer 3

you can run the slider in onload and check it out.

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      mode: 'fade',
      captions: true
    });
  });
</script>

otherwise, you can use anyone suitable slider in http://bxslider.com/examples