web-dev-qa-db-ja.com

Bootstrapカルーセルの幅と高さ

画像の全幅（幅：100％）と固定高さでbootstrapカルーセルを実行しようとしていますが、幅を100％に設定すると、高さも自動的に100％になります

問題がファイルにあるかどうかわからない

 <div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </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>

そして私のCSSファイル

.tales {
  width: 100%;
  height: 200px;
}
javascriptjqueryhtmlcsstwitter-bootstrap
37
Jorman Bustos

レスポンシブにしようとしていますか？もしそうなら、私はちょうど次をお勧めします：

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

ただし、これに対応する最適な方法は、次のようなメディアクエリを使用することです。

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
66
Eduardo La Hoz Miranda

bootstrap 4 Alphaを使用していて、クロムの画像の高さにエラーがある場合、解決策があります：bootstrap 4のドキュメントにはこう書かれています：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

解決策：

解決策は、次のようにクラス「.container」を使用して、画像の周りに「div」を配置することです。

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
  </div>
</div>
9
hugotom

Bootstrap 3には以下をお勧めします

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 500px;    /* Set slide height here */

}
8
Chuck

私はこれが古い投稿であることを知っていますが、Bootstrapはまだ生きていて蹴っています！

@Eduardoの投稿とは少し異なり、変更する必要がありました。

#myCarousel.carousel.slide {
    width: 100%; 
    max-width: 400px; !important
}

.carousel-inner {}のみを変更した場合、実際の画像のサイズは固定されていましたが、左右のコントロールがdivの横に誤って表示されていました。

7
rws

やあみんな私は同じ問題を抱えていた、

スライドが左にアニメーション化されている間に、高さが元の高さに変更されました（レスポンシブWebサイト）

だから私はCSSのみでそれを修正しました：

.carousel .item.left img{
    width: 100% !important;
}
3
David Chacon

画像が占める要素の高さを変更したいだけなら、これが役立つコードになることがわかりました

.carousel-item { height: 600px !important; }

ただし、これにより画像のサイズは動的にならず、画像がそのサイズに切り取られます。

0
Armando Jr. Allere