Question

作为一个新手，我意识到太迟了，无法在评论中添加代码。所以我提出了一个新问题并再次要求你的帮助。

由于空间原因，我使用的是具有固定宽度和高度的bxSlider（宽度为500px +高度为300px）。所有图像都具有相同的宽度，但有些图像的高度大于300px。

正如我所提到的 - 出于空间原因 - 我不想使用adaptiveHeight，而是（垂直）overflow:auto，但结果总是不令人满意，因为现在每个图像都会出现一个滚动条 - 在最大高度的图像长度。

当图像的高度超过300像素时，我只想要一个垂直滚动条。

这可能吗？

我在 query.bxslider.js ：

中尝试过此操作

.bx-wrapper {
    position: relative;  
    padding: 0;  
    *zoom: 1;  
    width:500px;  
    height:300px;  
    overflow:auto;  
}

.bx-wrapper img {  
    max-width: 100%;  
    display: block; 
}

由于我的查询知识仍然很低，我还尝试使用overflow:auto .bx-wrapper img，但它也不起作用。

Answer 1

我不得不使用javascript。如果您如此倾向，可以根据自己的需要调整FIDDLE。

只需单击单选按钮即可查看不同尺寸的图片。

JS

$('input:radio[name=photoradio]').change(function(){
    pnum = $('input:radio[name=photoradio]:checked').val();
   changethepicture(pnum);
});


function changethepicture(pnum)
{
  var photonum = $('.photo img:nth-child('+ pnum +')');
  $('.putmehere').html( photonum.height() );

  if( photonum.height() > 350 )
    {
      $('img').css('display', 'none');
      photonum.css('display', 'block');
        $('.photo').css('height', '350px');
      $('.photo').css('overflow-y', 'scroll');
     }
      else
    {
     $('img').css('display', 'none');
     photonum.css('display', 'block');
     $('.photo').css('height', 'auto');
     $('.photo').css('overflow-y', 'hidden');
     }
}

overflow-y：在bxSlider中滚动（水平滑块）第2部分

1 个答案: