Q&A
質問にコードを記載する時は<code>機能を使用しましょう。
レスポンシブデザインで、画像の縦に伸びるのを解消したいです。height:auto;を指定しているはずなのに、効きません。どうしてなのか、わからないので、よろしくお願いいたします。以下のHTMLの、contents img(<img src="img/evening.jpg">と <img src="img/space.jpg">)の縦が伸びています。
HTML
1 <div class="main-contents" id="concept" > 2 <div class="contents"> 3 <div class="concept"> 4 <div class="text"> 5 <h2>concept</h2> 6 <p>（初めての方へ）<br> 7 <br>ここにテキストが入ります。 8 <br>ここにテキストが入ります。 9 <br>ここにテキストが入ります。 10 <br>ここにテキストが入ります。 11 <br>ここにテキストが入ります。 12 <br>ここにテキストが入ります。 13 <br>ここにテキストが入ります。</p><br> 14 <a href="concept.html"><div class="text-a">more</div></a> 15 </div> 16 <img src="img/evening.jpg"> 17 </div> 18 <div class="menu"> 19 <img src="img/space.jpg"> 20 <div class="text"> 21 <h2>consulting menu</h2><p>（コンサルメニュー）<br><br>ここにテキストが入ります。 22 <br>ここにテキストが入ります。 23 <br>ここにテキストが入ります。 24 <br>ここにテキストが入ります。 25 <br>ここにテキストが入ります。 26 <br>ここにテキストが入ります。</p><br> 27 <a href="consulting menu.html"><div class="text-a">more</div></a> 28 </div> 29 30 31 32 </div> 33 </div> 34 <div class="image"> 35 <img src="img/sumple.png"> 36 37 </div> 38 39```stylesheet.css
.main-contents{
padding-top:100px;
display:flex;
justify-content:space-between;
margin-bottom:100px;
}
.contents img{
width:45%;
height:auto;
}
.concept img{
text-align:right;
}
.image img{
width:100%; opacity:0.8;
}
.contents{
text-align:center;
width:70%;
margin-left:50px;
}
.text{
width:55%;
}
.image{
text-align:right;
width:30%;
}
.concept{
display:flex;
margin-bottom:100px;
}
.menu{
display:flex;
}
responsive.css
1
.contents img{
width:55%;
height:auto;
回答1件
0
ベストアンサー
display: flexの要素はデフォルトでalign-items: stretchが設定されるので、子要素の高さが全て揃う状態なっています。
cssに下記のようにalign-items: centerかalign-items: flex-startなどを追加してみてください。
css
1.concept { 2 display: flex; 3 margin-bottom: 100px; 4 align-items: center;/*追加*/ 5} 6.menu { 7 display: flex; 8 align-items: center;/*追加*/ 9}
投稿2021/08/13 08:46
編集2021/08/13 08:50総合スコア1293
ご指摘の通りに追記したところ、縦横比が正常に戻り、解決いたしました！
解答だけではなく説明もつけてくださり、勉強になります！
本当に助かりました。ありがとうございました（＾＾
あなたの回答
tips
プレビュー
