Bxslider Setting Height

问题:

So I just started using bxslider.

I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?

回答1:

You can add following css.

.bx-wrapper, .bx-viewport {
    height: 200px !important; //provide height of slider
}

Check out this fiddle..bxslider

回答2:

Why not style the elements? If you set a fix height for the wrapper you could get in trouble with overflows and positioning.

If you are using lists:

.bx-wrapper ul li { height: 200px; }

回答3:

You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...

like so:

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}

• i should note that:
  bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)

• solution:
  use media queries to set a different height when viewed in mobile (just a suggestion)

best of luck...

回答4:

This worked for me, and allows you to keep responsiveness

    .bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}

回答5:

I solved centering and fixed size with these lines

.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;

}

回答6:

I would recommend wrapping it with a div then adjusting the div's CSS. Bxslider I believe inherits the height & width.

.yourDivClass{
    height:200px;
    width:200px;
}

From here you can adjust the li's accordingly:

.yourDivClass li {
    background-color:green; //just to see the overflow if height & width isn't equal
}

Hope this helps.

回答7:

Update!

http://jsfiddle.net/u62LR/

Just set your image height...

.bx-wrapper, .bx-viewport {
    height: [IMAGE HEIGHT] !important; 
}

回答8:

If you don't want use !important just make like this

.bx-wrapper {
  height: 400px; //Just choose your height
  display: block;
  overflow: hidden;
 }

回答9:

Just use the max-height:

.bx-wrapper .bx-viewport{max-height: 657px;}