レスポンシブデザインで画像の縦横比を正常にしたい

レスポンシブデザインで、画像の縦に伸びるのを解消したいです。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;

webgoto

2021/08/13 03:03 編集

質問にコードを記載する時は<code>機能を使用しましょう。

umi-ushi

2021/08/13 05:54

次回から気を付けます。

行動規範の内容に同意します

回答1件

ベストアンサー

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}