レスポンシブデザインで画像が縮小されてしまう

前提・実現したいこと

長文で失礼します。
サイトの模写を練習しています。
以下のサイトをレスポンシブデザインにしようとすると、
メインの画像はとても小さく表示され、プロフィールの部分の顔写真については細長く縮小されてしまいます。
何が原因でしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Write-書くためのテーマ</title>
7  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11<header>
12
13  <div class="container">
14    <div class="title">
15      <h1><a class="logo" href="index.html">Write</a></h1>
16      <p>書くためのテーマ</p>
17    </div>
18
19    <div class="nav">
20      <ul>
21        <li><a href="">ホーム</a></li>
22        <li><a href="">ページ</a></li>
23        <li><a href="">タイポグラフィー</a></li>
24        <li><a href="">お問い合わせ</a></li>
25        
26      </ul>
27    </div>
28
29    <div class="search-icon">
30      <span class="fa fa-search"></span>
31    </div>
32
33  </div>
34
35</header>
36
37<main>
38  <div class="main-image">
39    <img src="img/top.jpg">
40    <h1>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限までは省いたデザインは、あなたの文章を主役にします。</h1>
41  </div>
42
43  <div class="wrapper">
44    <div class="section">
45      <div class="date">
46        <p>2018年9月1日</p>
47      </div>
48      <div class="info">
49       <p><a href="">書くためのテーマ</a></p>
50       <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
51     </div>
52   </div>  
53    
54     <div class="section">
55       <div class="date">
56         <p>2018年3月5日</p>
57       </div>
58       <div class="info">
59        <p><a href="">画像付きの投稿</a></p>
60        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
61       </div>
62    </div>
63
64     <div class="section">
65       <div class="date">
66         <p>2018年3月5日</p>
67       </div>
68       <div class="info">
69        <p><a href="">引用付きの投稿</a></p>
70        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
71       </div>
72     </div> 
73      
74     <div class="section">
75       <div class="date">
76         <p>2018年3月5日</p>
77       </div>
78       <div class="info">
79        <p><a href="">コメント付きの投稿</a></p>
80        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…。</p>
81      </div>
82    </div> 
83
84     <div class="section">
85       <div class="date">
86         <p>2018年3月3日</p>
87       </div>
88       <div class="info">
89        <p><a href="">吾輩は猫である</a></p>
90        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
91      </div>
92    </div>  
93
94     <div class="section">
95       <div class="date">
96         <p>2018年9月1日</p>
97       </div>
98       <div class="info">
99        <p><a href="">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></p>
100        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
101      </div>
102    </div>  
103
104
105 </div>
106
107 <div class="page">
108  <ul>
109    <li class="number"><a href="">1</li></a>
110    <li class="number"><a href="">2</li></a>
111    <li class="number"><a href="">3</li></a> 
112    <li class="number"><a href="">次へ&raquo;</li></a>
113
114  </ul>
115</div>
116
117
118<div class="introduction">
119
120<div class="prof">
121  <div class="profile">  
122    <img src="img/profile.png">   
123      <div class="name">
124         <h1><strong>John Doe</strong></h1>
125           <ul>
126             <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
127             <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
128             <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
129           </ul>
130      </div>
131 </div>  
132    <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
133</div>
134 
135
136<div class="footer-right">
137  <h2>フッター右</h2>
138  <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
139</div>
140
141<div class="post">
142  <h2>最近の投稿</h2>
143  <ul>
144    <li><a href="">書くためのテーマ</a><br>2018年9月1日</li>
145    <li><a href="">画像付きの投稿</a><br>2018年3月5日</li>
146    <li><a href="">引用付きの投稿</a><br>2018年3月5日</li>
147  </ul>
148</div>
149  
150<div class="category">
151  <h2>カテゴリー</h2>
152  <ul>
153    <li><a href="">サンプル投稿</li></a>
154    <li><a href="">投稿フォーマット</li></a>
155    <li><a href="">普通の投稿</li></a>   
156  </ul>
157</div>
158
159</div>
160
161  <input type="text" name="sabject" placeholder="検索...">
162
163</main>
164
165<footer>
166  <ul>
167    <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
168    <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
169    <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
170  </ul>
171
172  <p>Powered by WordPress | Theme: Write by Themegraphy</p>
173</footer>
174
175</body>
176</html>
177
178
179

CSS
1
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9 body { 
10 font-family: "Yu Mincho","Hiragino MIncho Pro" ,"serif";
11 margin:80px 140px 0 140px; 
12 
13}
14
15* {
16  box-sizing: border-box;
17}
18
19 img {
20  max-width: 100%;
21  height:auto;
22} 
23
24 li { 
25  list-style: none;
26 } 
27
28
29a:hover {
30  color:#b8860b;
31}
32
33p, li {
34  color:#77778d;
35}
36
37header .container h1 {
38  font-size: 40px;
39  font-weight: bold;
40  height:55px;
41
42}
43
44.logo {
45  color:black;
46}
47
48header p {
49  font-size: 18px;
50 
51}
52
53header a {
54  text-decoration: none;
55}
56
57 .nav ul { 
58  display:flex;
59  width: 450px;
60  height: 84px;
61  justify-content:space-between;
62}
63
64
65
66ul li {
67  align-self:flex-end;
68
69}
70
71nav a {
72  color:black;
73}
74
75 header .container {
76  display:flex;
77  justify-content: space-between;
78 }
79
80
81
82 .search-icon span {
83   display:block;
84   padding-top: 60px;
85
86 }
87
88
89.main-image {
90  margin-top:70px;
91}
92
93
94  main img {
95    width:100%; 
96  }
97
98  .main-image h1 {
99    color: #77778d;
100    font-size: 25px;
101    line-height: 1.9;
102    padding: 85px 0 ;
103    font-weight: normal;
104    letter-spacing: 1px;
105  }
106
107  .wrapper a {
108    color:black;
109    font-size: 22px;
110    font-weight: bold;
111    text-decoration: none;
112
113  }
114
115  .section {
116    display:flex;
117    padding-bottom: 70px;
118  }
119
120  .date {
121    width: 30%;
122  }
123
124  .info {
125    width: 70%;
126  }
127
128  .info p {
129    padding-bottom:20px;
130  }
131
132
133.number .next {
134  display: block;
135  
136}
137
138.page ul {
139  text-align: center;
140  display:flex;
141  justify-content:center;
142  
143}
144
145.number {
146  width:50px;
147  line-height:50px;
148}
149
150.number a {
151  text-decoration: none;
152  color: grey;
153}
154
155.next {
156  width: 85px;
157  line-height:50px;
158}
159
160.page li {
161  border: 1px solid #DDDDDD;
162  margin-right: 10px;
163}
164
165.page {
166  padding-bottom: 100px;
167  border-bottom: 1px solid  #DDDDDD;
168}
169
170.profile img {
171  width:100px;
172  height:100px;
173  border-radius: 50%;
174}
175
176  .name li { 
177  display: inline-block;
178  width: 30px;
179  height:15px;
180}  
181
182 .fa-fw {
183 font-size: 25px;
184 color:silver;
185 
186}
187
188.fa-fw:hover{
189  color: grey;
190}
191
192
193.profile {
194  display:flex;
195}
196
197
198
199.name h1 {
200  font-size: 20px;
201  font-weight: bold;
202  padding: 20px 0 15px 10px;
203  
204}
205
206.name {
207  padding-left: 20px;
208}
209
210.introduction {
211  display:flex;
212  padding-top: 40px;
213}
214
215.prof {
216  width: 35%;
217  padding: 40px 50px 0 0;
218}
219.footer-right {
220  width: 25%;
221  padding: 40px 50px 0 0;
222
223}
224.post {
225  width: 20%;
226  padding: 40px 50px 0 0;
227}
228.category {
229  width:20%;
230  padding: 40px 50px 0 0;
231}
232
233.introduction h2 {
234  font-size: 16px;
235  font-weight: normal;
236}
237
238.post a {
239  text-decoration: none;
240  border-bottom: 1px solid  #DDDDDD;
241  color: #77778d;
242
243}
244.category a {
245  text-decoration: none;
246  border-bottom: 1px solid  #DDDDDD;
247  color: #77778d;
248}
249
250.post a:hover {
251  color:#b8860b
252}
253.category a:hover {
254  color:#b8860b
255}
256
257.profile  {
258  padding-bottom: 18px;
259}
260
261
262.footer-right p {
263  padding-top: 25px;
264}
265.post ul {
266  padding-top: 25px;
267}
268.category ul {
269  padding-top: 25px;
270}
271
272.post li {
273  padding-bottom: 12px;
274}
275.category li {
276  padding-bottom: 15px;
277}
278
279input {
280  line-height:35px;
281  display: block;
282  width: 150px;
283  padding-left:10px;
284  font-size: 16px;
285  margin-left: auto;
286}
287
288main {
289  padding-bottom: 50px;
290  border-bottom: 1px solid  #DDDDDD;
291}
292
293
294 footer li { 
295  display: inline-block;
296  width: 30px;
297  height:15px;
298 }
299
300 footer {
301   padding: 50px 0 ;
302   display: flex;
303 }
304
305 footer ul {
306   padding-right: 220px;
307 }
308
309 @media (max-width:767px) {
310
311 }
312
313

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

回答1件

ベストアンサー

このような形になると思います。

CSS
1@media (max-width: 1000px) {
2  body {
3    /* margin: 80px 140px 0 140px; */
4    /* 左右の余白「140px」は広すぎるので狭くする。好きな値を指定。 */
5    margin-left: 20px;
6    margin-right: 20px;
7  }
8
9  .prof img {
10    /* 画像を少し小さくする。100pxのままがいいなら不要。 */
11    width: 80px;
12    height: 80px;
13
14    /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさを指定。 */
15    flex: 0 0 80px;
16  }
17  .prof .name {
18    /* 余白が余ったときや足りないとき伸び縮みする */
19    flex: 1 1 0%;
20  }
21}
22@media (max-width: 767px) {
23  /* 画面サイズが767px以下のとき、フッターを横並びでなく縦並びにする */
24  .introduction {
25    display: block;
26  }
27  .prof,
28  .footer-right,
29  .post,
30  .category {
31    /* 縦並びにしたとき、横幅いっぱいに広げる */
32    width: auto;
33  }
34}