Question

如果屏幕变小，图像会在底部被切断。

我创建了一个jsfiddle：

项目链接：

http://printnil.com/products/sammelmappe?variant=1000940579

这样可行，但看起来并不是最好的：

@media only screen and (min-width: 304px) { .royalSlider {min-height: 207px;} }
@media only screen and (min-width: 344px) { .royalSlider {min-height: 235px;} }
@media only screen and (min-width: 384px) { .royalSlider {min-height: 262px;} }
@media only screen and (min-width: 424px) { .royalSlider {min-height: 289px;} }
@media only screen and (min-width: 464px) { .royalSlider {min-height: 316px;} }
@media only screen and (min-width: 504px) { .royalSlider {min-height: 344px;} }
@media only screen and (min-width: 544px) { .royalSlider {min-height: 371px;} }
@media only screen and (min-width: 584px) { .royalSlider {min-height: 398px;} }
@media only screen and (min-width: 624px) { .royalSlider {min-height: 425px;} }
@media only screen and (min-width: 664px) { .royalSlider {min-height: 453px;} }
@media only screen and (min-width: 704px) { .royalSlider {min-height: 480px;} }
@media only screen and (min-width: 744px) { .royalSlider {min-height: 507px;} }
@media only screen and (min-width: 784px) { .royalSlider {min-height: 535px;} }
@media only screen and (min-width: 824px) { .royalSlider {min-height: 562px;} }
@media only screen and (min-width: 864px) { .royalSlider {min-height: 589px;} }
@media only screen and (min-width: 904px) { .royalSlider {min-height: 616px;} }
@media only screen and (min-width: 944px) { .royalSlider {min-height: 644px;} }
@media only screen and (min-width: 984px) { .royalSlider {min-height: 671px;} } 
@media only screen and (min-width: 1024px) { .royalSlider {min-height: 750px;} }

Answer 1

我对CSS没有多少知识，但我认为我发现了这个问题。

在resize上，您的滑块也会改变rsOverflow的高度。所以，当屏幕尺寸非常小时，它会将rsOverflow的高度更改为小于image's高度

你有三种解决方法

您只能为该
编辑插件脚本并更改更新高度的逻辑
编写一个功能，可以在加载和调整大小时改变高度。

第三个例子的示例代码是

var updateHeight = function(){
    setTimeout(function(){
        var $img = $('.rsSlide img');
        $img.closest('.rsOverflow').css('height',$img.height()+"px");
    },100); // setTimeout is required since it should run after the plugin has updated the height. 
}
$(window).resize(updateHeight).load(updateHeight);

如何使这个图像滑块响应？

1 个答案: