CSSでflex boxの中の画像をレスポンシブに

実現したいこと

画像が縦横比を保ったままレスポンシブしたい。

前提

HTMLとCSSでフルートイメージの作業をしている
max-widthを使っても対比が保たずに崩れる

発生している問題・エラーメッセージ

HTML 32行目からのフレックスボックスの中にある
画像が崩れる
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-09/60dc9b44-dd3e-47ff-a088-17faec2c1bd9.png)

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>トップページ</title>
6    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="shortcut icon" href="assets/images/favicon.ico">
9    <link rel="stylesheet" href="assets/css/sanitize.css">
10    <link rel="stylesheet" href="assets/css/style.css">
11  </head>
12  <body>
13    <div class="container">
14      <div class="container">
15        <header class="header">
16          <div class="header_inner">
17            <img src="assets/images/logo_transparent.png" alt="coding Practice">
18            <nav>
19              <ul class="nav-box">
20                <li class="nav-list"><a href="#">Top</a></li>
21                <li class="nav-list"><a href="#">My Challenge</a></li>
22                <li class="nav-list"><a href="#">Just Continue</a></li>
23              </ul>
24            </nav>
25          </div>
26        </header>
27        <main>
28          <section class="sec01">
29            <h1 class="main-title">Coding Practice Everyday!!</h1>
30            <p class="sub-title">Start from HERE</p>
31          </section>
32          <section class="sec02">
33            <h2 class="title">My Challenge</h2>
34            <div class="flex">
35              <article class="post">
36                <img src="assets/images/brooke-cagle-g1Kr4Ozfoac-unsplash (1).png" alt="談話">
37                <p class="flexible">もくもく会in大阪のコーディング
38                  イベントに参加してきました！！</p>
39                <time datetime="2020-06-28">2020.06.28</time>
40              </article>
41              <article class="post">
42                <img src="assets/images/brooke-cagle-NoRsyXmHGpI-unsplash.png" alt="笑顔の女性">
43                <p class="flexible">模写コーディングを１つ終わらせ
44                  ることができました！！次はもう
45                  少し難しいものに挑戦します！</p>
46                <time datetime="2020-07-02">2020.07.02</time>
47              </article>
48              <article class="post">
49                <img src="assets/images/kevin-hendersen-MQ4eKnHtOUg-unsplash.png" alt="ライトアップ">
50                <p class="flexible">「1冊ですべて身につくHTML&C
51                  SSとWebデザイン入門講座」を
52                  完走しました！！</p>
53                <time datetime="2020-07-10">2020.07.10</time>
54              </article>
55            </div>
56            <button class="more">もっと見る</button>
57          </section>
58          <section class="sec03">
59            <h2 class="continue">Just Continue</h2>
60            <p class="sec03_text">日々、学び続ける<br>
61              いつか、Webで世界を今より少しだけ<br>
62              よくするために<br>
63              でも、今は自分のために<br>
64              毎日少しずつ勉強する<br>
65              そんな私と共に学んでくれる方を募集しています</p>
66            <a class="sec03_button" href="#">お問い合わせしてみる</a>
67          </section>
68        </main>
69        <footer>
70          <small>copyright(C) 2020 All Rights Reserved.</small>
71          <p class="seisaku">制作時間　4時間</p>
72        </footer>  
73      </div>
74  </body>
75</html>

CSS
1@charset "utf-8";
2
3body {
4  font-family: "Helvetica Neue",
5    Arial,
6    "Hiragino Kaku Gothic ProN",
7    "Hiragino Sans",
8    Meiryo,
9    sans-serif;
10}
11a {
12  text-decoration: none;
13  color: #333;
14}
15* {
16  margin: 0;
17  padding: 0;
18}
19
20.container {
21  max-width: 1366px;
22  margin: 0 auto;
23}
24
25/* 
26header
27*/
28.header {
29  height: 80px;
30  background-color: #fff;
31}
32.header_inner {
33  line-height: 80px;
34  display: flex;
35  justify-content: space-between;
36  align-items: center;
37  max-width: 980px;
38  width: auto;
39  margin: 0 auto;
40}
41.nav-box {
42  display: flex;
43  justify-content: space-between;
44  align-items: center;
45}
46.nav-list {
47  margin-right: 20px;
48}
49.nav-list:last-of-type {
50  margin-right: 0;
51}
52@media (max-width:768px){
53
54
55}
56/* 
57sec01
58*/
59.sec01 {
60  position: relative;
61  background: url(../images/austin-distel-wawEfYdpkag-unsplash.png) center center/cover ;
62  max-width: 1366px;
63  width: auto;
64  height: 551px;
65}
66.hero {
67  max-width: 1366px;
68  width: auto;
69}
70.main-title {
71  color: #fff;
72  font-weight: bold;
73  font-size: 36px;
74  position: absolute;
75  top: 50%;
76  left: 50%;
77  transform: translate(-50%, -50%);
78}
79.sub-title {
80  color: #fff;
81  font-size: 16px;
82  position: absolute;
83  top: 60%;
84  left: 50%;
85  transform: translate(-50%, -60%);
86}
87@media (max-width:768px){
88  .sec01 {
89    text-align: center;
90  }
91  .sub-title {
92    top: 70%;
93    left: 50%;
94    transform: translate(-50%, -60%);
95  }
96}
97
98
99/* 
100sec02
101*/
102.sec02{
103  background-color: #fff;
104  padding: 60px 193px 88px;
105  text-align: center;
106}
107.title {
108  margin-bottom: 49px;
109}
110.flex {
111  display: flex;
112  justify-content: space-between;
113  align-items: center;
114  gap: 20px;
115}
116.post {
117  display:flex;
118  flex-direction: column;
119  gap: 20px 20px;
120  height: 310px;
121  width: calc(33.3% - 20px * 2 / 3);
122  box-shadow: 2px 2px 2px 2px #eee ;
123  text-align: left;
124}
125.post img{
126  width: 100%;
127  min-width: 310px;
128  height: auto;
129  object-fit: hidden;
130}
131.flexible {
132  margin: 0px 20px;
133  flex-grow: 1;
134}
135.post time {
136  margin: 0 20px;
137}
138.more {
139  margin: 46px auto 0;
140  padding: 17px 110px;
141  border: 1px solid #EEEEEE;
142  box-shadow: 0px 3px 6px 2px #eee;
143  background-color: #fff;
144  font-weight: bold;
145}
146@media (max-width:768px){
147  .sec02 {
148    padding: 40px 0px 60px;
149  }
150  .flex {
151    display: block;
152  }
153  .post {
154    width: 100%;
155  }
156  .post img {
157    height: 155px;
158  }
159}
160
161
162/* 
163sec03
164*/
165.sec03 {
166  background-image: url(../images/tim-bogdanov-4uojMEdcwI8-unsplash.png);
167  background-repeat: no-repeat;
168  background-position: center;
169  background-size: cover;
170  max-width: 1366px;
171  width: auto;
172  height: 455px;
173  text-align: center;
174  color: #fff;
175  padding: 59px 0 44px;
176}
177.continue {
178  font-weight: bold;
179  margin-bottom: 47px;
180}
181.sec03_text {
182  margin-bottom: 50px;
183  line-height: 28px;
184}
185.sec03_button {
186  padding: 19px 25px;
187  background-color: #83032A;
188  color: #fff;
189}
190@media (max-width:768px){
191  .sec03 {
192    padding: 50px 0 120px;
193    height: 400px
194  }
195  .continue {
196    margin-bottom: 34px;
197  }
198  .sec03_text {
199    margin-bottom: 45px;
200  }
201  .sec03_button {
202    margin-bottom: 30px;
203  }
204}
205
206/* 
207footer
208*/
209footer {
210  height: 80px;
211  color: #fff;
212  background-color: #333333;
213  line-height: 80px;
214  text-align: center;
215}
216small {
217  height: 80px;
218  line-height: 80px;
219  background-color: #333333;
220  color: #fff;
221}
222.seisaku {
223  background-color: antiquewhite;
224  color: #333;
225}

hatena19

2023/02/09 05:01

画像のリンクがうまくできていないです。コードブロックの外にだしてください。 > 画像が対比を保ったままレスポンシブしたい。この「対比」とはどのような意味ですか。画像の縦横比(アスペクト比)のことでしょうか。 .post の高さが 310px; に固定ですが、中身のテキストによってはみ出しますが、その場合はどのようにするつもりですか。

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

回答2件

度々ご回答いただき誠にありがとうございます。
すごく勉強になりました。

煮詰まっていたのが全て解消されました。
ありがとうございました。

投稿2023/02/12 03:17

makiko-320

総合スコア5

ベストアンサー

質問内の画像リンクが正しく表示されるように修正して張り直しました。↓

これは現状のスクリーンショットですね。
ご希望のレイアウトが不明ですか、おそらくよくあるカード型レイアウトにしたいのだと思いますので、忖度してサンプルコードを作成してみました。

css
1/* 
2sec02
3*/
4.sec02 {
5  background-color: #fff;
6  padding: 60px 193px 88px;
7  text-align: center;
8}
9.title {
10  margin-bottom: 49px;
11}
12.flex {
13  display: flex;
14  justify-content: space-between;
15  align-items: stretch; /* 修正 */
16  gap: 20px;
17}
18.post {
19  display: flex;
20  flex-direction: column;
21  gap: 20px 20px;
22  width: calc(33.3% - 20px * 2 / 3);
23  box-shadow: 2px 2px 2px 2px #eee;
24  text-align: left;
25}
26.post img {
27  width: 100%;
28  min-height: 100px;  /* 追加 */
29  object-fit: cover;  /* 修正 */
30}
31.flexible {
32  margin: 0px 20px;
33  flex-grow: 1;
34}
35.post time {
36  margin: 0 20px;
37}

CodPenサンプル

imgにmin-width: 310px;を指定しているのでカードの幅がそれより小さくなるとはみ出すので削除しました。代わりにmin-heightを設定して小さくなりすぎないようにしました。
object-fit: cover;に修正して画像がうまくクリップされるようにしました。
また、親要素にalign-items: stretch;を設定してカードの高さが揃うようにしました。

上記のサンプルを元にご希望のものに改修してください。うまくいかないなら、どこがどううまくいかないか質問しなおしてください。

投稿2023/02/11 01:25

hatena19

総合スコア33715