9

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

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;
}

どんな助けでも大歓迎です。どんなサイズの写真をアップロードしても、それが使用可能と見なされるようにしたい.

4

6 に答える 6

1

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

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

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

于 2013-03-11T08:13:55.133 に答える
0

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

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

これにより、画像が画面 (またはコンテナー) の端まで引き伸ばされ、高さが少し増加するため、画像が引き伸ばされたり押しつぶされたりすることがなくなります。

于 2014-01-10T01:10:52.193 に答える