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;
}
コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/24 05:24