質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

2回答

589閲覧

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

makiko-320

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2023/02/09 02:53

編集2023/02/12 12:17

実現したいこと

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

前提

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">模写コーディングを1つ終わらせ 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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2023/02/09 05:01

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

回答2

0

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

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

投稿2023/02/12 03:17

makiko-320

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

質問内の画像リンクが正しく表示されるように修正して張り直しました。↓
イメージ説明
これは現状のスクリーンショットですね。
ご希望のレイアウトが不明ですか、おそらくよくあるカード型レイアウトにしたいのだと思いますので、忖度してサンプルコードを作成してみました。

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

総合スコア33539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問