0

ブートストラップを使用してカルーセルを作成しようとしています。画像 (幅と高さが異なる) を一定の比率で表示したい . 私が CSS で試したことはすべて壊れ、画像の比率が壊れて、カルーセルのサイズを継承します。

CSS

.carousel .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 702px;
max-width: none;

}

HTML コード:

<div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="active item">
        <img src="image1.jpg"/>
        </div>
        <div class="item">
        <img src="image1.jpg"/>
        </div>
      </div>
    </div>

画像の比率を維持する別のカルーセル ソリューションを探す必要がありますか、それとも回避策がありますか?

編集1：

    .carousel .item > img {
      max-width: 100%;
      height: 100%;
      width: auto;
      text-align: center;
      margin: 0 auto;

    }
4

2 に答える 2

2

それはあなたがやろうとしていることですか？幅 100% と高さは追従しますか?

.carousel .item > img {
   min-width: 100%;
   height: auto;
}
于 2013-08-02T23:22:03.890 に答える
0

新しいBootstrap 4カルーセルheight:autoはフレックスボックスを使用しているため、修正を尊重しません。そのため、要素の高さを比例して計算する必要があり、ほとんどの場合、初期寸法は不明であるため、JSを使用して画像の絶対位置を計算または使用する必要があります。ワームの新しい缶ですが、汚い修正を探しているなら、これをお勧めします

.carousel-item img {
        width: 100%;
        height: 68vw; /* play with this */
    }

デモhttps://codepen.io/nodws/pen/gRozMM

于 2017-06-29T17:15:48.393 に答える