imgにheight： auto；を指定すると画像の高さが変わって統一できなくなりました。

Question

bootstrapのcontainerクラスの中にimgタグを3つ横並べしたのですが、height: auto;を指定すると右端っこの画像だけ小さくなります。レスポンシブ化するときにheight: auto;は指定しておいたほうがいいとのことで、指定したまま画像の高さが変わらずに対応させたいです。回答よろしくお願いします。

コード <style>
    .container {
      max-width: 1040px;
      padding: 0;
    }
　　　</style>
    
    <div class="container">
            <div class="main-5 mt-5 pt-4">
              <h4 class="font-weight-bold mb-3">ホスティングの詳細はこちら</h4>
            </div>
            <div class="row main-6">
              <div class="col-md-4 mb-3">
                <img src="https://cdn.pixabay.com/photo/2017/08/03/20/50/romantic-2578312_960_720.jpg"  alt="">
                <p class="font-weight-bold">初期設定</p>
                <h6>ホスティング入門ガイド</h6>
                <a href="#" class="stretched-link">もっと詳しく</a>
              </div>
              <div class="col-md-4">
                <img src="https://cdn.pixabay.com/photo/2017/04/01/16/42/young-woman-2194038_960_720.jpg"  alt="">
                <p class="font-weight-bold">安全</p>
                <h6>ホストを守るAirbnbのしくみ</h6>
                <a href="#" class="stretched-link">もっと詳しく</a>
              </div>
              <div class="col-md-4">
                <img src="https://cdn.pixabay.com/photo/2017/05/18/21/39/teacup-2324842_960_720.jpg" alt="" >
                <p class="font-weight-bold">マネープラン</p>
                <h6>Airbnbで収益を得るには</h6>
                <a href="#" class="stretched-link">もっと詳しく</a>
              </div>
    </div>

```CSSここに言語を入力
コード

• {
  box-sizing: border-box;

}

img {
max-width: 100%;
height: auto;
}

.main-6 h6 {
font-size: 14.2px;
font-weight: lighter;
}

.main-6 a:hover {
color: #429c9c;
text-decoration: none;
}

.main-6 a {
color: #429c9c;
font-size: 14.2px;
}

.stretched-link::after {
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 326.66px;
margin: auto;
}

.main-6 img {
width: 100%;
border-radius: 5px;

}

コード

Answer 1

左２つの画像のサイズは 960×720px ですが、右の画像は960×639pxで少し高さが小さいので当然そうなります。

画像のサイズをそろえるのが一番簡単かつ確実な方法です。
画像ソフトやWEBサービスで簡単に変更できます。

Comments

[fuyukixxx]

画像ソフトで先整えたから貼り付けたほうがやっぱりいいんですね。ありがとうございます。