web-dev-qa-db-ja.com

Bootstrapのカードの画像を同じ高さ/幅にする方法は？

ここに私のコードがあります。それは6枚のカード、3枚の横列と2つの列を表示します。画像のサイズを手動で変更することなく、すべての画像を同じサイズにしたいと思います。応答性は機能します。「img-fluid」をクラスとして使用し、モバイルまたはより小さいブラウザーにアクセスすると、すべて同じ幅になりますが、高さはまだオフです。

<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
      <div class="card-block">
        <h4 class="card-title">Brownie Delight</h4>

        <p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
      <div class="card-block">
        <h4 class="card-title">Butter Pecan</h4>

        <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
      <div class="card-block">
        <h4 class="card-title">Black Cherry</h4>

        <p class="card-text">Our classic Vanilla loaded with plump black cherries to give flavor and color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
      <div class="card-block">
        <h4 class="card-title">Mint Chip</h4>

        <p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
      <div class="card-block">
        <h4 class="card-title">Pistachio</h4>

        <p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
      <div class="card-block">
        <h4 class="card-title">More Flavors</h4>

        <p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
      </div>
    </div>
  </div>
</div>

これが image 私が得ているものであり、これが私が望むものです get それらはすべて同じサイズです。

htmlcssimagetwitter-bootstrap
41
Renuz

あなたのCSSでこれを試してください：

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

必要に応じて高さvwを調整します。 object-fit：coverは、画像の拡大ではなくズームを有効にします。

72
sepuckett86

Bootstrap 4 Emdeds Utilitiesを使用してこの問題を解決しました

https://getbootstrap.com/docs/4.3/utilities/embed

この場合、次のようにdiv.embbed-responsiveに画像を追加するだけです。

<div class="card">
  <div class="embed-responsive embed-responsive-16by9">
     <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
  </div>
  <div class="card-block">
    <h4 class="card-title">Butter Pecan</h4>
    <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
  </div>
</div>

すべての画像は、修飾子クラスで指定された比率に適合します。

  • .embed-responsive-21by9
  • .embed-responsive-16by9
  • .embed-responsive-4by3
  • .embed-responsive-1by1

さらに、このcssは画像のストレッチではなくズームを可能にします

.embed-responsive .card-img-top {
    object-fit: cover;
}
10
Pelerano
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

上記のように、高さを追加するときは、モバイルフレンドリーなエクスペリエンスのために「vh」（ビューポートの高さの単位）を使用することをお勧めします。

9
Dimitar Milushev
.card-img-top {
    height: 15rem;
    object-fit: cover;
}
6
Jeremy Lynch

既知の問題

回避策は次のように設定する必要があると思います

.card-img-top {
    width: 100%;
}
5
maxisam

メディアクエリと同じBootstrap 4のブレークポイントを使用して、「手動で」行った...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

これは機能しますが、この種のよりネイティブな応答性があればいいのですが。

@ sepuckett86とIからの部分的な提案。

2
Robert Andrews

それらをトリミングせずにできるとは思わない。jqueryを使用してdivを同じ高さにすることができるが、これは画像を同じサイズにしない。

この見た目を適切にするメイソンリーの使用をご覧ください。

http://masonry.desandro.com/

1
Michael Mano

各画像は、配置する前に正確な寸法である必要があります。そうでない場合、bootstrap 4はファンキーな形状に配置しようとします。 Bootstrapには、必要に応じて使用できるドキュメントにMasonryのようなものもあります。ここでそれを確認できます http://v4-alpha.getbootstrap.com/components/card/#列 。

0
Renuz