web-dev-qa-db-ja.com

Bootstrap高さが固定されたカルーセル：画像の寸法に基づいて画像を水平または垂直に中央に配置

bootstrap高さが固定されたカルーセルがあります。CSSは次のとおりです。

.carousel-custom .carousel-outer {
  position: relative;
}


@media(min-width: 992px){
    .carousel-custom {
      margin-top: 20px;

    .carousel-inner {
      height: auto;
    .item {
        height:500px;
        line-height:300px;
      }
    }
  }
}

@media(max-width: 991px){
.carousel-custom {
      margin-top: 20px;

    .carousel-inner {
      height: auto;
    .item {
        height:300px;
        line-height:300px;
        text-align:center;

      }
    }
  }
}

そして、ここに私のマークアップがあります：

    <div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel">
      <div class="carousel-outer">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932">
              <div class="carousel-caption"></div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

        <!-- Indicators -->
        <ol class="carousel-indicators  mCustomScrollbar">
            <li data-target="#carousel-custom-1188" data-slide-to="0" class="active">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd">
            </li>
            <li data-target="#carousel-custom-1188" data-slide-to="1" class="">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p">
            </li>
            <li data-target="#carousel-custom-1188" data-slide-to="2" class="">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932">
            </li>
        </ol>
      </div>
    </div>

問題は、同じカルーセルに非常に幅の広い画像、非常に幅が狭く高さの高い画像、および配給量の高さ/幅が良好な画像があることです。

幅の広い画像を垂直方向（100％の幅）に、高さのある画像を水平方向（100％の高さ）に、「通常の」画像（高さ/幅の比率が適切）をすべて埋めたいカルーセル。

これが私がやろうとしていることです（最初の画像は非常に幅の広い画像、2番目の画像は非常に高い画像、最後の画像は「まともな」比率です）。

Image very wide

Image very high

Image with decent ration

どうすればこれを達成できますか？ BootstrapのCarouselを中央に配置するか、レスポンシブにするか およびGoogleで見つかったその他のトリックを試しましたが、どれもこれを行いませんでした。

htmlcssimagetwitter-bootstrap
11
Graham Slick

.item要素は相対的な位置にあるため、img要素を絶対に配置できます。 .item要素は固定された高さで、内部の画像を垂直および水平に揃えるのに役立ちます。

これを行うにはさまざまな方法があると確信しています。ここに1つの例を示します。それが役に立てば幸い。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background-color: black;
}

.carousel-inner > .item {
  height: 100vh;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 800px;
  width: auto;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>
25
DavidDomain

さて、私はしばらくいじっていました。結果は以下のようになりました。それがあなたの質問に役立ち、答えられることを願っています（少なくとも小さな部分は）。

<head>
    <title>Bootstrap Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    html,
    body {
        height: 100%;
    }

    .carousel,
    .item,
    .active {
        height: 100%;
    }

    .carousel-inner {
        height: 100%;
    }

    /* Background images are set within the HTML using inline CSS, not here */

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    footer {
        margin: 50px 0;
    } 

    .tester {
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="tester">
    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
    </div>
</body>

繰り返しますが、それが役立つことを願っています！

2
Craz1k0ek

スライダーの高さが固定されている場合は、単に絶対画像を使用します

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="middle">
        <img src="http://placehold.it/1920x500">
      </div>
    </div>
    <div class="item">
      <div class="middle">
        <img src="http://placehold.it/1920x300">
      </div>
    </div>
    <div class="item">
      <div class="middle">
        <img src="http://placehold.it/600x900">
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

css

.carousel {
  width: 500px;  /*test width*/
  height: 300px; /*what ever height */
}

.middle {
  position: relative;
  height: 300px; /*what ever height */
}

.middle img {
  max-width: 100%;
  max-height: 100%; /*what ever height */
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

fiddle を参照

0
Ismail Farooq