ページ上部の画像の最小値の設定の仕方、中央配置

ページ上部の.aburasoba_mainをウィンドウを小さくした時画像が小さくなりすぎてしまうのですが最小値はどうやって設定できますでしょうか。
また画像は中央配置にしたいです
ご教授お願いいたします。

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"><!-- baneではなくname -->
6  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css">
8  <link rel="stylesheet" href="css/font-awesome.min.css">
9  <!--インストールしたfontawesomeを読み込む-->
10  <link rel="stylesheet" href="css/styles.css">
11  <!--作ったCSSを読み込む-->
12  <meta bane="viewport" content="width=device-width, initial-scale=1.0">
13  <!--スマホで開いたとき度の幅で描画するかの設定-->
14
15  <title>RWD</title>
16</head>
17
18<body>
19<header>
20
21  <div class="container">
22  <!--  <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>-->
23    <ul class="pc-menu">
24      <li>Menu</li>
25      <li>Menu</li>
26      <li>Menu</li>
27    </ul>
28    <h1 class="aburasoba">油そば池袋</h1>
29  </div>
30
31<div class="aburasoba_main">
32<div class="aburasoba_main_about">
33  <img src="img/wallpaper.jpg">
34</div>
35</div>
36
37  <section class="features"><!--section1-->
38    <h2>Features</h2>
39    <div class="item">
40      <img src="img/feature.jpg">
41      <p class="right-side">hello. hello. hello. hello. hello. hello. hello.
42        hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
43    </div>
44
45    <div class="item">
46      <img src="img/feature.jpg">
47      <p class="left-side">hello. hello. hello. hello. hello. hello. hello.
48        hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
49    </div>
50
51    <div class="item">
52      <img src="img/feature.jpg">
53      <p class="right-sidet">hello. hello. hello. hello. hello. hello. hello.
54        hello. hello. hello. hello. hello. hello. hello. hello. hello. </p>
55    </div>
56  </section>
57</header>
58  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
59  <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script>
60  <script>
61      $(function () {
62          $("div.container").meanmenu({});
63      });
64  </script>
65
66  <footer>
67    <div class="sita">
68        <img src="img/footer.png">
69    </div>
70  </footer>
71
72</body>
73
74
75</html>
76

/ｃｓｓ----------------------------------------------------------------------------------/
@charset "utf-8";
/common/

body{/初期設定、余計なmargin,paddingを0に/
font-size: 14px;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
color: #333;
background: #F2F2F2;
/初期設定/
}
p{/行間がゆったりする/
line-height: 2;
}

.container{/ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて
左右に一定の空きができる/
width: 90%;
margin: 0 auto;
}
/aburasoba_main トップの背景/
.aburasoba_main{
background-color: black;
margin: 10px;
padding-bottom: 10px;
padding-left: 300px;
padding-right: 300px;

}

.aburasoba_main_about img{
display: block;/blockの要素では、余白も自由に決めることができます。言い換えると、上下左右にpadding（要素の内側の余白）とmargin（要素の外側の余白）の値を自由に指定できます。/
margin-left: auto;
margin-right: auto;
width:800px;
max-width: 80%
}

}

/header-mobile-menuはアイコン右寄せ/
.mobile-menu{
float: right;
font-size: 24px;
cursor: pointer;
}

.pc-menu{
display: none;
}

.pc-menu{
display: block;/要素の表示形式をしていするっぽい、ブロック要素を表示,,/
/46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる/
list-style: none;
padding: 10px;
margin: 0;
/余計なマージンパディング取る、/
float: right;/mysiteも入っているheader-pc-menuの中に右にする設定/
}

.pc-menu > li {
display: inline-block;/横にする設定/
width: 60px;
text-align: center;
cursor: pointer;
}

/sita ...imgと指定すれば画像が指定できた/
.sita img {
display: block;
height: 50px;
margin: 0 auto;
width: 50px;
}

/レスポンシブルデザイン設定①/
/幅の大きさが変わる設定/
/画面が570px以下になったとき/
@media (max-width: 414px){
.pc-menu{/アイコンを消す/
display: none;
}
.aburasoba{/アイコンを消す/
display: none;
}
.features p{
width: 45%;
}
.features img{
width: 50%;
}
/.pull-right/
.right-side{
float: right;
padding-left: 5%;
}
/.pull-left/
.left-side{
float: left;
padding-right: 5%;
}
.features .item{/float:leftやrightを使ったので/
overflow: hidden;
}
.news .container{
display: flex;
justify-content: space-between;/均等に余白が空く設定/
}
.news .item{/newsに入っている画像と文字に対して30%/
width: 30%;
}
.news .item img{/画像が30％だとちゃんと見えないので画像だけ100%に/
width: 100%;
}
}
/画面が570px以上になったとき
min-widthが〇〇以上、max-widthが〇〇までという認識/
@media (min-width: 414px){
.container{
width: 414px;
}
.mobile-menu{/アイコンを消す/
display: none;
}
}
/１----------------------------------------------------------------------------------/

section{/共通のスタイル、上下にサイズがほしい/
padding: 60px 0;
}

section h2{/文字を中央ぞろえ、下にマージン空き/
text-align: center;
}

section:nth-child(even){/背景色の切り替え/
background: #fff;
}

/features/
.features img{/親要素音containerに対して100%の設定なので左右ぴったりになった/
width: 100%;
}

.features .item{/写真と文字を囲っているfeaturesの下の空き/
margin-bottom: 60px;
margin-left: 60px;
margin-right: 60px;
}

.features .item:last-child{/これにだけ指定という意味/
margin-bottom: 0;
}

.news .item:last-child{/これにだけ指定という意味/
margin-bottom: 0;
}

/footer/

footer {
text-align: center;
padding: 10px 0;
}

kei344

2017/09/09 10:54

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

sutosi

2017/09/16 07:54

修正致しました！

kei344

2017/09/16 11:10

CSSもコードブロックでお願いします。

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

回答1件

ベストアンサー

lang
1.aburasoba_main_about img{
2display: block;
3margin-left: auto;
4margin-right: auto;
5width:800px;
6max-width: 80%;
7
8// 追加して下さい↓
9min-width: 100px;
10min-height: 100px;
11
12}