width・height関連プロパティの値（CSS）

width・width関連プロパティの値（CSS）

width・width

値（パラメータ）	内容
auto	自動（初期値）

＜数値+単位（相対単位）＞ 0の時のみ単位を省略できます）

値（パラメータ）	内容
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位

入力例	width: 162px;

画像のサイズ：162×108

上記表示例のサンプルコード（HTML埋め込み）

<p><img src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-03.jpg" alt="">画像のサイズ：162×108</p>

元の画像サイズ：162×108
この表示：65×43

上記表示例のサンプルコード（HTML埋め込み）

<p><img src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-03.jpg" alt="" width="65" height"43">元の画像サイズ：162×108<br>この表示：65×43</p>

サンプルコード（CSS別記）

/*CSSコード*/
.width-heiht1 {
  width: 65px;
  height: 43px;
}
.width-heiht2 {
  width: 162px;
  height: 108px;
}

<!--HTMLコード-->
<p>大きい画像をそのまま表示<br><img src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg" alt="">元のサイズは650×433</p>
<p>大きい画像を小さく表示<br><img class="width-heiht2" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg" alt="">元のサイズは650×433<br>表示は162×108</p>
<p>大きい画像を小さく表示<br><img class="width-heiht1" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg" alt="">元のサイズは650×433<br>表示は65×43</p>

サンプルコード（CSS別記） の表示

大きい画像をそのまま表示
元のサイズは650×433

大きい画像を小さく表示
元のサイズは650×433
表示は162×108

大きい画像を小さく表示
元のサイズは650×433
表示は65×43

サンプルコード（CSS別記）

/*CSSコード*/
.width-heiht2 {
  width: 162px;
  height: 108px;
}
.width-heiht3 {
  width: 650px;
  height: 433px;
}

<!--HTMLコード-->
<p>小さい画像をそのまま表示<br><img src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg" alt="">元のサイズは65×43</p>
<p>小さい画像を大きく表示<br><img class="width-heiht2" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg" alt="">元のサイズは65×43<br>表示は162×108</p>
<p>小さい画像を大きく表示<br><img class="width-heiht3" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg" alt="">元のサイズは65×43<br>表示は650×433</p>

サンプルコード（CSS別記）の表示

小さい画像をそのまま表示
元のサイズは65×43

小さい画像を大きく表示
元のサイズは65×43
表示は162×108

小さい画像を大きく表示
元のサイズは65×43
表示は650×433

max-width・min- width

＜max-width＞

値（パラメータ）	内容
none	制限なし（初期値）
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+%	親要素に対する比率

入力例	max-width: 90%;

<min- width>

値（パラメータ）	内容
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+％	親要素に対する比率

入力例	min-width: 540px;

サンプルコード（CSS別記）

/*CSSコード*/
.bg-size-width {
  width: 600px;
  height: 400px;
  background-color: #fdf2f4;
}
.max-width {
  max-width: 90%;
  max-height: 90%;
}
.bg-size-max-width {
  max-width: 600px;
  min-width: 540px;
  min-height: 400px;
  background-color: #fdf2f4;
}
.bg-size-max-width1 {
  max-width: 600px;
  min-width: 485px;
  min-height: 400px;
  background-color: #fdf2f4;
}
.min-width {
  width: 540px;
  min-width: 500px;
}

<!--HTMLコード-->
<div>バックグラウンドサイズ固定600px × 400px<br>
画像サイズmax-width90%<br>
（バックグラウンドサイズの90%=最大で540px、最小で540px）<br>
<div class="bg-size-width"><img class="max-width" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg"></div></div>

<div>バックグラウンドサイズ伸縮max-width600px～min-width540px × max-height400px<br>
画像サイズmax-with90%<br>
（バックグラウンドサイズの90%=最大で540px、最小で486px）<br>
<div class="bg-size-max-width"><img class="max-width" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg"></div></div>

<div>バックグラウンドサイズ伸縮max-width600px～min-width485px × max-height400px<br>
画像サイズwith540px～min-width500px<br>
（バックグラウンドは600～450まで伸縮し、画像は540～500まで伸縮）
<div class="bg-size-max-width1"><img class="min-width" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg"></div></div>

サンプルコード（CSS別記）の表示

ブラウザの幅を狭めてみると効果がわかります。

max-height・min-height

＜max-height＞

値（パラメータ）	内容
none	制限なし（初期値）
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+%	親要素に対する比率

入力例	max-height: 1000px;

<min-height>

値（パラメータ）	内容
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+％	親要素に対する比率

入力例	min-height: 500px;

サンプルコード（CSS別記）

/*CSSコード*/
.bg-size-height {
  width: 600px;
  height: 400px;
  background-color: #fdf2f4;
}
.max-height {
  max-width: 90%;
  max-height: 90%;
}
.bg-size-max-height1 {
	max-width: 600px;
	min-height: 400px;
	background-color: #fdf2f4;
}
.min-height {
	min-height: 350px;
}

<!--HTMLコード-->
<div>バックグラウンドサイズ固定600px × 400px<br>
画像サイズmax-height90%<br>
（バックグラウンドサイズの90%=最大で縦3600px、最小で360px）<br>
<div class="bg-size-height"><img class="max-height" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg"></div></div>

<div>バックグラウンドサイズ伸縮<br>
・横：最大600px（max-width指定（画像の横サイズ）） ～ 画面縮小サイズ<br>
・縦：最大400px（画像の縦サイズ） ～ 最小400px（min-height指定）<br>
画像サイズ伸縮<br>
・横：最大600px（画像の横サイズ） ～ 画面縮小サイズ<br>
・縦：最大400px（画像の縦サイズ） ～ 最小350px（min-height指定）<br>
<div class="bg-size-max-height1"><img class="min-height" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg"></div></div>

サンプルコード（CSS別記）の表示

ブラウザの幅を狭めてみると効果がわかります。