javascript - 如何使此图像 slider 响应？

Question

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

我创建了一个 jsfiddle:

http://jsfiddle.net/zjbrm6e4/

元素链接:

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 了解不多，但我想我找到了问题。

在调整大小时，您的 slider 也会改变rsOverflow 的高度。因此，当屏幕尺寸非常小时，它会将 rsOverflow 的高度更改为小于 image 的 高度

你有三种方法来解决这个问题

1. 您只能为此编写媒体查询
2. 编辑插件脚本并更改更新高度的逻辑
3. 编写一个函数，在加载和调整大小时改变高度。

第三个例子的示例代码是

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