javascript - 以 HTML 格式在 jQuery Slider 上居中图像

Question

我有一个 jQuery 内容 slider 。但我有一个问题，高大的图像被拉伸(stretch)了。不是可以居中图像吗？有人说我需要将溢出设置为隐藏。但这没有任何区别。 最好的问候 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 类。其次，您正在设置 IMG 标记的 width 和 height 属性，而实际上您应该在容器上设置这些属性(在本例为 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);
    }
}​