Question

我有一个jQuery内容滑块。但我有一个问题，高大的图像伸展。是不是可以使图像居中。有人说我需要将溢出设置为隐藏。但它没有任何差异。最好的关注Morten Starck

html代码：

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

和Javascript：

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

和CSS代码：

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

Answer 1

这里有两件事你做错了。首先，您对多个元素使用相同的ID，这是无效的。我认为你打算使用CSS类。其次，您要设置width标记的height和IMG属性，实际上您应该在容器上设置这些属性（在本例中为LI）。请尝试以下方法：

将您的标记更改为

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

将CSS更改为

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

如果图像尺寸大于LI容器

，则更新图像尺寸

此脚本假定为containerWidth和containerHeight设置了变量，因此只需将它们设置为LI容器大小的任何值，并将图像大小调整为容器的最大约束，以便你可以看到整个图像。

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

首先，将属性id更改为属性类。 Id表示标识符，顾名思义，两个东西不能有相同的标识符。要使图像居中，请为ul标记添加id并添加以下css：

text-align：center;

试试这个......不确定它是否会起作用。

Answer 3

你可以在onload中运行滑块并检查它。

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

否则，您可以在http://bxslider.com/examples

中使用任何合适的滑块

在HTML中的jQuery Slider上的中心图像

3 个答案: