web-dev-qa-db-ja.com

Twitterブートストラップ：カルーセル：検出された高さのビューポートで画像を垂直方向に中央揃え

カルーセルのビューポート内で画像を垂直方向に中央揃えにする方法を見つけようとしています。現在、画像は正常に機能しており、幅のビューポートのサイズに画像のサイズを変更しています。ただし、画像の中央を使用して、写真の上下をトリミングしたいと思います。

HTMLは次のとおりです。

<div class="carousel slide hero">
   <div class="carousel-inner">
       <div class="active item">
            <img src="img/hero/1.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/2.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/3.jpg" />
       </div>
    </div>
    <a class="carousel-control left" href=".hero" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href=".hero" data-slide="next">&rsaquo;</a>
</div><!-- hero -->

そしてcssの小さなビット：

.carousel-inner {
    height: 320px;
    overflow: hidden;
}

どんな助けでも大歓迎です。どんなサイズの写真でもアップロードしても使えるようにしたいと思います。

cssimagetwitter-bootstrapcarousel
9
David Leonard

.itemの高さを指定し、その中の画像を絶対位置にすることで、この問題を解決しました。

.item {
height: 300px;
}

.item img {
max-height: 100%;  
max-width: 100%; 
position: absolute;  
top: 0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;
}

これにより、カルーセルの高さが300ピクセルになり、画像が垂直方向と水平方向の中央に配置されます。

18
Naragot

画像の高さがわからない場合は、次のスタイルを使用できます

＃product-detail .carousel-inner {
高さ：500px; 
} 
 
＃product-detail .carousel-inner> .active {
位置：相対; 
上：50％; 
変換：translateY（-50％）; 
} 
＃product-detail。カルーセル-inner> .next、
＃product-detail .carousel-inner> .prev {
トップ：50％; 
変換：translateY（-50％）; 
}

ここに、 #product-detailは、bootstrapスタイルをオーバーライドするラッパーとして使用されます。
また、transformをウェンドライズすることを忘れないでください。

6
grigson

これはあなたを助けるかもしれません

このプラグインを試してみてください

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

そして、ここを見てください。

Twitter Bootstrap垂直サムネイルカルーセル

1
Shivam Pandya

以下を使用します。これにより、画像がカルーセルビューポートの中央に配置され、高さが320pxに設定されます。

.carousel-inner>.item>img {
    margin: 0 auto;
    height: 320px;
}

これがあなたを助けてくれることを願っています

1
YorickH

カルーセルの中央に画像を配置したかった

grigsonの回答はFirefoxではうまく機能しましたが、Chromeでは機能しませんでした。それで、多くの苦労の後で、私はこの解決策を思いつきました：

画像をdiv.itemの背景として配置します。これにより、レイアウトを乱すことなく画像を簡単に配置できるようになります。

.carousel-inner .item {
    width: 100%; /* Your width */
    height: 500px; /* Your height */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* This also makes sure it fills the whole div */
}

/* add the images to divs */
div.item:nth-of-type(1) {
    background-image: url("../img/carousel-photos/1.jpg");
}

div.item:nth-of-type(2) {
    background-image: url("../img/carousel-photos/2.jpg");
}

div.item:nth-of-type(3) {
    background-image: url("../img/carousel-photos/3.jpg");
}

div.item:nth-of-type(4) {
    background-image: url("../img/carousel-photos/4.jpg");
}

それは最善の方法ではないかもしれませんが、私にとっては本当にうまくいきます。

0
Martin Omacht

YorickHの回答に少し追加しました

.carousel-inner>.item>img {
margin: 0 auto;
height: 600px;
width: 100%;
}

これにより、画像が画面の端（またはコンテナ）まで引き伸ばされ、高さが少し高くなるため、画像が引き伸ばされて押しつぶされたように見えなくなります。

0
cavemanstyle