0

我有一个 jQuery 内容滑块。但是我有一个问题，高大的图像被拉伸了。是不是可以将图像居中。有人说我需要将溢出设置为隐藏。但它没有任何区别。最好的问候莫滕斯塔克

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

3 回答 3

0

你在这里做错了两件事。首先，您对多个元素使用相同的 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);
    }
}​
于 2013-01-02T09:43:08.867 回答
0

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

文本对齐：居中；

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

于 2013-01-02T09:46:15.530 回答
0

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

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

否则，您可以在http://bxslider.com/examples中使用任何合适的滑块

于 2013-01-02T10:36:07.350 回答