web-dev-qa-db-ja.com

フクロウカルーセル2レスポンシブ画像

この場合、いくつかのトピックがありますが、すべてを試した後、成功しませんでした。フクロウカルーセル2プラグインで画像をレスポンシブにしようとしています。プラグインオプションでresponsiveオプションを使用し、希望の解像度でアイテムの数を制御できますが、一部の解像度の画像では親の高さに適合しません。 view-ad-imageそしてそれは250pxの高さを持っています、そして私はすべての解像度にしたいです、画像はこの高さに適合します。

これまでに試したこと：

.owl-carousel .owl-item img {
    display: block;
    height: 250px;
    min-width: 100%;
}

結果：画像はある程度の解像度で引き伸ばされているため、成功しません。

.owl-carousel .owl-item img {
  display: block;
  height: 100%;
  width: 100%;
}

結果：これも機能していません。静止画の高さが親に合わない。

そこでウィンドウ幅（解像度）を変更できるため、jsfiddleの例を示しますが、StackOverflowスニペットでは変更できません。したがって、テストのために、結果を確認するために結果フレーム幅を変更してください。

目標：

すべての画像を親の高さに合わせます。赤い背景が表示されないはずです。表示されている場合は、応答がなく、収まらないことを意味します。

JSFiddle

jquerycssowl-carousel-2
3
tour travel

あなたができる最善のことは：

.owl-carousel .owl-item img {
    display: block;
    height: 100%;
    width: auto;
    min-width: 100%;
}

@Manishの回答のようなものも必要です：

.owl-stage-outer * {
     height:100%;
}

デモ

ただし、このようなものを使用することをお勧めします。これをデバイスで使用する場合は、親も応答し続ける必要があります。

#view-ad-image {
  width: 100%;
  height: 100%;
  max-height: 250px;
  overflow: hidden;
  background: red;
  position: relative;
}

JSFiddle

2
Pedram
<div id="owl-example" class="owl-carousel">
  <div class="owl-slide">
        <div class="owl--text">
        This is a full height Owl slider. There is nothing else interesting here!</div>
    </div>
  <div class="owl-slide">
        <div class="owl--text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
    </div>
  <div class="owl-slide">
        <div class="owl--text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam excepturi voluptate eveniet consectetur numquam laboriosam.
        </div>
    </div>
</div>


.owl-carousel {
    position: relative;
    height: 100%;

    div:not(.owl-controls) {
        height: 100%;
    }

    .owl-slide {
        background-image: url('https://images.unsplash.com/photo-1437915015400-137312b61975?fit=crop&fm=jpg&h=800&q=80&w=1200');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    div.owl--text {
        position: absolute;
        bottom: 4em;
        left: 2em;
        width: 20em;
        height: 8em;
        padding: 1em;
        background: rgba(255, 255, 255, .5);
        border-radius: 4px;
    }

    .owl-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;

        .owl-buttons {
            div {
                position: absolute;
                top: 0;
                bottom: 0;
                display: inline-block;
                zoom: 1;
                margin: 0;
                width: 50px;
                height: 30px;
                line-height: 25px;
                text-align: center;
                font-size: .9em;
                border-radius: 3px;
                color: #FFF;
                background: #000;
                opacity: .6;
                text-transform: capitalize;
            }

            .owl-prev {
                left: 5px;
            }

            .owl-next {
                right: 5px;
            }
        }
    }
}


$(document).ready(function() {

  $("#owl-example").owlCarousel({
        navigation : true, 
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true,
            pagination: false,
        rewindSpeed: 500
    });

});
0
Mayur Baldha

これはうまくいくはずです

.owl-stage-outer * {
     height:100%;
}

JSFiddle

0
Manish