3

だから私は次の問題の解決策を探していました：

ブートストラップカルーセルは、コンテナのサイズに合わせて画像を拡張できます。これはすべて元気でダンディです。高さの異なる画像がある場合に問題が発生します。

カルーセルは、画像に合わせてコンテナの高さを拡張します。これは、次の方法で修正できます。

.container.banner .carousel-inner {
    height:500px;
}

画像をオフセットしようとすると問題が発生するので、上部ではなく中央が表示されます。<img>これが意味するのは、すべての画像の高さが異なるため、タグ内の画像を上に移動する必要があるということです。

背景画像の使用を説明する解決策を見つけた人もいますが、この投稿のために、その可能性を避けたいと考えています。

so tl; dr：カルーセル内で画像Xの量を垂直方向にシフトするにはどうすればよいですか。

これが私のコードです：HTML：

<div class="container banner">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="img/carousel/Carousel.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/carousel/Carousel (2).jpg" alt="">
            </div>
            <div class="item">
                <img src="img/carousel/Carousel (3).jpg" alt="">
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel"
            data-slide="next">&rsaquo;</a>
    </div>
</div>

Css

.container.banner .carousel-inner {
    height:500px;
}
.container.banner .carousel-inner img{
    /*something to move the image*/
    /*top:5px; This doesnt work dynamically, percentage doesnt react*/

}

編集：

次のことを行うと、次のようになります。

.container.banner .carousel-inner .item{
    position:relative;
    width:100%;
    bottom: 47%;
}
.container.banner .carousel-inner .item img{
    width:100%;
}

あなたは解決策のようなものを手に入れますが！画像によっては、多かれ少なかれ行き渡る場合があります。理想的には、画像の中心はカルーセルの中央にある必要があります。そして、ここに私の現在の問題があります...

編集2：答え

したがって、以下は、垂直方向の中央に表示されるように画像をいくらかオフセットすることに成功します。

<script type="text/javascript">
$(document).ready(function () {
    $( ".container.banner .carousel-inner .item" ).each(function( index ) {

         $(this).css("margin-top",-(($(this).height())/4) + 'px');
    }
)});
</script>

これをHTMLの最後に追加すると、画像の高さに関係なく、オブジェクトをカルーセルの垂直方向の「中央」に配置できます。<img>また、タグの幅を元の投稿のように100％に設定することを忘れないでください。

そして最後のコメント：解決策については@bleuscytherの功績によるものです。

4

1 に答える 1

1

画像の最大高さを修正できます

.container.banner .carousel-inner .item img{

    max-height :500px

}

.carrousel-inner の例の固定幅がある場合は、画像を中央に配置したい場合があります。

.container.banner .carousel-inner {
 width :900px
}
.container.banner .carousel-inner .item img{
 max-width: 900px;
 margin: 0 auto;
}

編集

画像を以前の CSS + this の使用に合わせたい場合:

img {
    position: absolute;
    top: 50%;
    left: 50%;

}

そして少しjquery

ページの下部に:

<script>

$(document).ready(function () {
$( ".container.banner .carousel-inner .item img" ).each(function( index ) {

    X= $(this).width()
    Y= $(this).height()
    margin_left = -(X/2);
    margin_top = -(Y/2);

   $(this).css("margin-left",margin_left + 'px');
   $(this).css("margin-top",margin_top + 'px');
};

)};

</script>

コードが機能し、ロジックが得られる場合は、コードを圧縮できます。

 $(this).css("margin-left",-(($(this).width())/2) + 'px');
于 2013-03-05T04:48:53.340 に答える