Question

我正在使用一个带有bxslider的WordPress主题所以它的作用是显示一个全宽滑块。所以我想将滑块的宽度减少到屏幕的一半。我找不到合适的解决方案和css来控制它。

Answer 1

将'.bx-wrapper'设置为width: 50%;（从全屏宽度）和margin: 0 auto;以获得半宽滑块并将其居中：

.bx-wrapper
{
    width: 50%;
    margin: 0 auto;    
}

默认情况下，滑块从最高子元素获取高度，除非您为子项设置特定高度 - 默认情况下，'。bx-wrapper img'设置为max-width: 100%;，因此如果总滑块的宽度得到了小于那么图像将是相同的，如果你不希望滑块变小，将'.bx-wrapper img'设置为height: 100%;和width: auto;，图像的边缘可能会得到如果你不上传适当的分辨率，但你不会失去滑块的高度：

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

完整示例：http://jsfiddle.net/1mqzb0gx/3/

如何将bx滑块中图像的大小减半

1 个答案: