img画像をウインドウ幅に合わせて表示したい

前提・実現したいこと

初めてのポートフォリオを作成しています。
pc画面の見た目だけ完成しており、レスポンシブを進めています。
自己紹介欄のimg画像をウインドウ幅に合わせて表示したいという内容になります。

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

自己紹介欄のimg画像（meinクラスのfot）を中央寄せにしようとmarginで調整したのですが、
ウインドウ幅を狭めると、自己紹介欄のimg画像だけが
右端に固定され、右側に大きな余白が出来てしまいます。

該当のソースコード

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.0">
6  <title> portfolio</title>
7  <meta name="description" content="のポートフォリオとなります">
8  <link rel="stylesheet" type="text/css" href="stylesheet.css">
9  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
10</head>
11
12<body>
13<!-- header クラス   -->
14  <div id="home" class="big-big">
15    <header class="page-header wrapper">
16      <h1><a href="#"></a></h1>
17      <nav>
18       <ul class="main-nav">
19        <li><a href="#">ホーム</a></li>
20        <li><a href="#">自己紹介</a></li>
21        <li><a href="#">スキル</a></li>
22        <li><a href="#">制作物</a></li>
23        <li><a href="#">お問い合わせ</a></li>
24      </ul>
25      </nav>
26    </header>
27  
28<!-- home クラス -->
29    <div class="home-content wrapper">
30      <h1 class="page-title">はじめまして！<br>です。</h1>
31      <a class="button" href="#">お問い合わせ</a>
32    </div>
33    </div>
34  
35<!-- mein クラス -->
36  <div class="mein-content wrapper">
37    <article>
38      <header class="intro">
39        <h2>自己<span>紹介</span></h2>
40        <p>プログラミングに興味を持ち始めました。</p>
41        <p>名前は「」 と言います。前職のIT企業でPCを触れていくうちに、<br>
42          プログラミング言語を学ぼうと学習し始めました。<br>
43         </p>
44      </header>
45    </article>
46    <aside>
47      <img src="images/cropOOK86_alpha15142320.jpg" class="fot">
48    </aside>
49    </div>
50<!-- skil クラス     -->
51   <div class="skil section">
52     <h2 class="header">スキル</h2>
53     <div class="skil-content">
54       <div class="skil-categori">
55          <div class="skil-icon">
56            <p>HTML & CSS</p>
57            <P>★★★☆☆</P>
58          </div>
59        </div>
60        <div class="skil-categori">
61          <div class="skil-icon">
62            <p>PHP</p>
63            <P>★★★☆☆</P>
64          </div>
65        </div>
66        <div class="skil-categori">
67          <div class="skil-icon">
68            <p>Javascript</p>
69            <P>★★★☆☆</P>
70          </div>
71        </div>
72     </div>
73   </div>
74<!-- portfolio クラス -->
75   <div class="portfolio">
76     <h2>制作一覧</h2>
77     <p>調整中</p>
78   </div>
79
80<!-- contact クラス -->
81    <div class="contact">
82      <article>
83       <h2 class="tilte">お問い合わせ</h2>
84       <form action="#">
85        <div>
86         <label for="name">お名前</label>
87         <input type="text" id="name" name="your-name">
88        </div>
89
90        <div>
91         <label for="email">メールアドレス</label>
92         <input type="email" id="email" name="your-email">
93        </div>
94
95        <div>
96         <label for="message">メッセージ</label>
97         <textarea id="message" name="your-message"></textarea>
98        </div>
99
100        <input type="submit" class="button" value="送信"> 
101      </form>
102      </article>
103      <aside>
104        <a href="#" class="btn-icon-hover-reverse btn-icon-6">
105          <i class="fab fa-twitter"></i>
106        </a>
107        <a href="#" class="btn-icon-hover-reverse btn-icon-5">
108          <i class="fab fa-facebook"></i>
109        </a>
110      </aside>
111    </div>
112
113<!-- fotter クラス -->
114  <footer>
115    <div class="wrapper">
116      <p><samll>&copy; 2020 Toshiran</samll></p>
117      
118
119    </div>
120  </footer>
121

css
1@charset "utf-8";
2
3
4html {
5  font-size:100%
6}
7a{
8  text-decoration: none;
9}
10
11body{
12  margin: 0;
13  padding:0;
14  
15}
16
17img{
18   max-width: 100%;
19   display: block;
20   width:100%;
21   height: auto;
22   }
23
24.main-nav{
25  display:flex;
26  list-style:none;
27}
28
29.main-nav li{
30  margin-left:34px;
31  margin-top:20px;
32}
33
34.page-header{
35  display:flex;
36  justify-content: space-between;
37
38}
39.wrapper{
40  max-width:1100px;
41  margin:0 auto;
42}
43.wrapper h1{
44  font-size:20px;
45  margin:30px;
46}
47
48.home-content{
49  margin-top:10%;
50}
51.home-content h1{
52  font-size:45px;
53  font-family: 'poilosopher',serif;
54}
55.home-content a{
56  
57  margin:40px;
58}
59.button{
60  background:skyblue;
61  padding:10px;
62  color:black;
63  border-radius:5px;
64}
65.button:hover {
66  background:aqua;
67}
68
69.big-big{
70  background-size:cover;
71  background-position: center top;
72  background-repeat: no-repeat;
73  
74}
75
76#home{
77  background-image:url(/images/cropBIBAI1995090.jpg);
78  min-height:100vh;
79}
80article{
81  width:54%;
82
83}
84aside{
85  width:46%;
86}
87
88.fot{
89  margin:50px 0 0 250px;
90  width:150px;
91  height:150px;
92  border-radius:25%;
93  
94}
95.mein-content{
96  display:flex;
97  justify-content: space-between;
98  margin-bottom:50px;
99}
100.skil{
101  text-align:center;
102  background-color:#f2f2f2;
103  width:100%;
104  height:250px;
105}
106
107.skil-categori{
108  float:left;
109  width:33%;
110}
111.portfolio{
112  text-align:center;
113}
114
115.header{
116  padding:20px;
117}
118
119/* お問い合わせ　クラス */
120
121.contact{
122  background-color:#f2f2f2;
123  display:flex;
124  
125}
126article{
127  width:54%;
128}
129aside{
130  width:46%;
131}
132
133.contact h2{
134  margin-left:80px; 
135  padding-top:20px;
136}
137form div{
138  margin-bottom:14px;
139  margin-left:80px;
140}
141
142label{
143  font-size:15px;
144  margin-bottom:10px;
145  display:block;
146}
147input[type="text"],
148input[type="email"],
149textarea{
150  background:rgba(255,255,255,.5);
151  border:1px #fff solid;
152  border-radius:5px;
153  padding:10px;
154  font-size:15px;
155}
156input[type="text"],
157input[type="email"]{
158  width:100%;
159  max-width: 240px;
160}
161textarea{
162  width:100%;
163  max-width: 480px;
164  height:60px;
165}
166input[type="submit"]{
167  border:none;
168  font-size:15px;
169  cursor:pointer;
170  line-height:1;
171  margin-left:80px;
172  margin-bottom:20px;
173  padding:15px 40px;
174}
175
176a.btn-icon-hover-reverse {
177  display: inline-block;
178  text-decoration: none;
179  width: 60px;
180  height: 60px;
181  line-height: 60px;
182  margin:2px;
183  font-size: 25px;
184  border-radius: 50%;
185  text-align: center;
186  overflow: hidden;
187  border: 2px solid;
188  transition: 0.5s;
189  margin-top:50%;
190}
191a.btn-icon-6 {
192  color:#22b8ff;
193  background: #ffffff;
194  border-color: #22b8ff;
195}
196a.btn-icon-6:hover {
197  background: #22b8ff;
198  color:#ffffff;
199}
200
201a.btn-icon-5 {
202  color:#4267b2;
203  background: #ffffff;
204  border-color: #4267b2;
205}
206a.btn-icon-5:hover {
207  background: #4267b2;
208  color:#ffffff;
209}
210  
211footer{
212  background:black;
213  text-align:center;
214  padding:26px 0;
215
216}
217footer p {
218  color:white;
219  font-size:15px;
220}
221
222
223/* モバイル版 */
224
225@media (max-width: 600px){
226  .home-content h1{
227    font-size:20px;
228  }
229 
230 
231
232}

試したこと

css
1.fot{
2  width:100%;
3  height:100%;
4  max-width:100%;
5  height-width:100%;
6}
7

上記で書いてみると、ウインドウ幅に合わせて表示されるのですが、
サイズが固定してしまい、大きく表示されます。
width,heightdだけ調整したものの、
ウインドウ幅を狭めると、自己紹介欄のimg画像だけが
右端に固定され、右側に大きな余白が出来てしまいます。

初めての質問投稿で、分からないことだらけですが、
宜しくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

コードを書くのでコメントへの回答をここに書かせていただきます。

画面幅が縮まった時は見やすいレイアウトに変わるようにするというのは一からレイアウトを変えた方が良いという事ではなく、メディアクエリを使って画面幅が〇〇ピクセル以下の時だけレイアウトが変わるようにすれば良いという事です。

提示していただいているCSSでは600px以下をモバイル版としていますよね。
...なので、例えばですが、

css
1/* モバイル版 */
2
3@media (max-width: 600px){
4  .home-content h1{
5    font-size:20px;
6  }
7
8  .mein-content{
9    display : block;
10  }
11
12  article{
13    width:100%;
14  }
15
16  aside{
17    width:100%;
18  }
19
20}
21

…とすれば600px以上の画面幅の時は自己紹介の右側に画像が配置されていたのを、画面幅が600px以下の時だけ自己紹介の下に画像が来るようにできます。

このように画面幅が広い時は広いなりに見やすく、画面幅が狭い時は狭いなりに見やすいレイアウトにしてあげるのがレスポンシブの本領と言っても良いのではないかと思います。

投稿2020/03/05 14:32

tmyk1979

総合スコア145

toshiran

2020/03/06 11:57

レスポンシブ用のレイアウトについて、理解できました。また、コードのアドバイスもいただきありがとうございます。狭いなりのレイアウトがかなり見やすいです。頂いたアドバイスを元に他のレイアウトも進めてまいります。夜分遅くに、ありがとうございました。

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

ベストアンサー

ちょっとどんな完成イメージなのか分かりにくかったのですが、こんな感じでいかがでしょうか。

css
1.fot {
2    margin: 50px auto 0;
3    width: 30%;
4    height: auto;
5    border-radius: 25%;
6    min-width: 150px;
7    min-height: 150px;
8}

margin:50px 0 0 250px;だと画像の中央が中心に来ないで左辺がasideの左端から250pxのところに来てしまいます。中央に寄せるのであればmarginの左右をautoにすると良いでしょう。

レスポンシブで全体の幅が縮まるのに、この250pxが縮まらないため右側に余白ができてしまっていたのだと思います。この250pxはautoにすれば問題無いでしょう。

そうすると次は画像の150pxが縮まらないため、さらに画面幅を縮めていった時にどこかで同じような右側の余白ができてしまうと思うのですが、これは画像自体の幅をパーセントに変更（おおよそ150pxになるという事で３０％としました。）し、heightはautoにしました。こうすると画面幅を縮めていった時、画像は小さくなりながら位置を保ちます。

しかし、元画像の幅・高さが分からないのですが縦横比がおかしくなってしまったので、そもそも150px四方より小さくならなければ良いのでは？と思い、min-widthとmin-heightを150pxに指定しました。

なお、これでも画面幅350pxくらいより幅を縮めると余白が出ます。これはasideの46％に画像の150pxが収まり切れなくなるためです。これはもう画面幅を350pxより縮まらないようにbodyにmin-width:350pxとoverflow-x:hidden;を付けてしまうか、もしくはせっかくレスポンシブなので画面幅が縮まった時は見やすいレイアウトに変わるようにするしかありません。後者がおススメですが...。

ちょっと長くなりましたが、思っていた仕上がりと違ったらまたコメントください。

投稿2020/03/05 08:25

編集2020/03/05 08:55

tmyk1979

総合スコア145

toshiran

2020/03/05 13:22

tmyk1979さん細かいご説明、アドバイスいただきありがとうございます。問題なく、自身が思っていた通りに実現することが出来ました。また、展開出来ていない部分が足りず失礼いたしました。度々、質問があり申し訳ないのですが、『もしくはせっかくレスポンシブなので画面幅が縮まった時は見やすいレイアウトに変わるようにするしかありません。後者がおススメですが...。』上記については、一からレイアウトを変えた方がよろしいということでしょうか？

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

あなたの回答