Bx Slider 增加高度div
Bx Slider increase the height of the div
我正在使用 bxslider 和根据屏幕尺寸缩放高度的图像。为了让它显示所有内容,它隐藏了溢出 我想也增加 bx-viewport
的高度 我写的 jquery 只重新调整 bx-wrapper
的高度。这是下面的 jquery 和 jsfiddle 上的演示:http://jsfiddle.net/vgJ9X/838/
$( window ).resize(function() {
width = $('.bx-wrapper').width()/3;
width -= 14;
var height = width+29;
if (width > 160) {
width = 160;
height = 200;
}
box_height = height+height+(height/2);
$('.bx-wrapper').css('height',box_height);
$('.bx-viewport').css('height',box_height);
});
编辑:
我的问题是为什么 $('.bx-viewport').css('height',600);当放置在调整大小函数中时无法工作但是当我在控制台中键入它时工作,我知道有一个 adaptiveHeight 但对于我的情况我有 6 张图像:3 以上 3 下面所以下面的 space 是相同的因为它缩放我还必须计算图像的高度,对于那个演示我使用了一个预先存在的测试 jsfiddle.net/vgJ9X/1 因为如果它适用于 bxslider 的一个实例它应该适用于我的。我知道我是新手,我只是在 jquery 上变得更好。
与此不同 post Bxslider Setting Height 如果您查看示例 jsfiddle,我需要在调整浏览器大小时更改高度,您会看到底部导航选项卡随着黑点移动,因为 jquery 确实如此改变高度。我还需要为内容为 bx-viewport
的 div 实现相同的功能
这解决了问题。
.bx-viewport {
height: 100% !important;
}
之所以有效,是因为它是第一个 div 的 child,所以它 "inherits" parent div 的高度。
我正在使用 bxslider 和根据屏幕尺寸缩放高度的图像。为了让它显示所有内容,它隐藏了溢出 我想也增加 bx-viewport
的高度 我写的 jquery 只重新调整 bx-wrapper
的高度。这是下面的 jquery 和 jsfiddle 上的演示:http://jsfiddle.net/vgJ9X/838/
$( window ).resize(function() {
width = $('.bx-wrapper').width()/3;
width -= 14;
var height = width+29;
if (width > 160) {
width = 160;
height = 200;
}
box_height = height+height+(height/2);
$('.bx-wrapper').css('height',box_height);
$('.bx-viewport').css('height',box_height);
});
编辑:
我的问题是为什么 $('.bx-viewport').css('height',600);当放置在调整大小函数中时无法工作但是当我在控制台中键入它时工作,我知道有一个 adaptiveHeight 但对于我的情况我有 6 张图像:3 以上 3 下面所以下面的 space 是相同的因为它缩放我还必须计算图像的高度,对于那个演示我使用了一个预先存在的测试 jsfiddle.net/vgJ9X/1 因为如果它适用于 bxslider 的一个实例它应该适用于我的。我知道我是新手,我只是在 jquery 上变得更好。
与此不同 post Bxslider Setting Height 如果您查看示例 jsfiddle,我需要在调整浏览器大小时更改高度,您会看到底部导航选项卡随着黑点移动,因为 jquery 确实如此改变高度。我还需要为内容为 bx-viewport
这解决了问题。
.bx-viewport {
height: 100% !important;
}
之所以有效,是因为它是第一个 div 的 child,所以它 "inherits" parent div 的高度。