[WordPress] 半分に bx スライダーでイメージのサイズを小さく方法

スポンサーリンク

Question

上、bxslider を持っているのでそれが何のテーマはフル幅スライダーが表示されますワードプレスを使用しています。だから、画面の半分だけにスライダーの幅を小さくしたいと思います。私は適切なソリューションとそれを制御する css を見つけることができません

答え

‘.bx-‘

width: 50%;

する (からラッパー全画面幅) と半分の幅スライダーを取得し、それを中心に

margin: 0 auto;

を設定:

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

既定では、上のスライダー高さを取得します最高子要素から ‘.bx ラッパー img’ 合計スライダーの幅が小さい場合、イメージは同じになりますので、

max-width: 100%;

に設定既定で – 子供に特定の高さを設定しない限り、適切な解像度はアップロードされませんがないスライダーの高さ失うことになる場合、画像のエッジより小さい高さを取得、設定 ‘.bx ラッパー img’

height: 100%;

を、

width: auto;

スライダーを禁止する場合、カット可能性があります:

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

完全な例: http://jsfiddle.net/1mqzb0gx/3/

http://stackoverflow.com/questions/27177255/how-to-decrease-the-size-of-a-image-in-bx-slider-to-half

スポンサーリンク

Leave a Reply