Bxslider設定の高さ

Question

だから私はbxsliderを使い始めました。

ただし、スライダーのサイズの設定に問題があります。当然、最大の要素の高さが必要です（私は思う）。 200pxなどの固定の高さに設定するにはどうすればよいですか？

Answer 1

次のcssを追加できます。

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

このフィドルを確認してください。 bxslider

Answer 2

要素のスタイルを設定してみませんか？ラッパーに固定の高さを設定すると、オーバーフローと位置決めに問題が生じる可能性があります。

リストを使用している場合：

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

Answer 3

表示される画像の高さに関連する3つの要素すべてを設定する必要があります。これらは、メインコンテナ、内部コンテナ、および画像自体です...

そのように：

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

• 私はそれに注意する必要があります：
  [。 ）

• 解決：
  メディアクエリを使用して、モバイルで表示するときに異なる高さを設定する（単なる提案）

幸運を...

Answer 4

これは私にとってはうまくいき、あなたは応答性を保つことができます

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

Answer 5

これらの線でセンタリングと固定サイズを解決しました

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

}

Answer 6

max-height：

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

Answer 7

divでラップし、divのCSSを調整することをお勧めします。 Bxslider私は高さと幅を継承すると信じています。

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

ここから、liを適宜調整できます。

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

お役に立てれば。

Answer 8

！importantを使用したくない場合は、このようにします

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

Answer 9

更新！

http://jsfiddle.net/u62LR/

画像の高さを設定するだけです...

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