web-dev-qa-db-ja.com

bootstrap gridで画像を同じサイズにする

Bootstrapグリッドシステムを使用して、各行に3つの画像を含む3行の画像ギャラリーを作成しています。すべての画像のサイズが異なります。 CSSでmax-heightまたはmax-widthを使用しようとしましたが、すべての画像（サムネイル）を同じサイズにするのに役立ちませんでした。解決？

body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
          </div>
        </div>

        <div class="row flex match-to-row">
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
            </div>
          </div>
    </div>
  </div>
htmlcsstwitter-bootstrapimagebootstrap-grid
6
Jacob Murin

あなたが探しているプロパティは object-fit だと思います

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

object-fitプロパティは、背景画像でbackground-size: coverを使用して、拡大せずにページを埋めるようにする方法と同様に機能します。このように、すべての画像が従うルールで幅を定義して、画像を歪めることなく同じサイズにすることができます。

このプロパティで使用できるその他の値は次のとおりです。

  • fill-画像を引き伸ばします。
  • contain-画像のアスペクト比を保持します。
  • cover-ボックスの高さと幅を埋めます。
  • none-元のサイズを保持します。
  • scale-down-noneとcontainsの違いを比較して、最小のオブジェクトサイズを見つけます。

object-fit | CSS-Tricks

16
natejms

すべての画像にimg-responsiveのcssクラスを追加します。

3
Chris Cousins

これを変更するだけです：

img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}
0
Shark