縦横比は変えずに画像を拡大、縮小して表示したい

###前提・実現したいこと
・image画像の縦横比は元のまま、ウインドウサイズの縦横の小さい方に合わせて拡大・縮小して
ウインドウがどんな大きさ、形になっていても
画像がウインドウに収まっている状態で表示させたい。
・左右中央寄せにしたい。
・画像を元の大きさ以上には拡大しないようにしたい。
・背景画像にする以外の方法で行いたい。

###該当のソースコード

◎ＨＴＭＬ

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<TITLE>画像テスト用</TITLE>
</HEAD>
<BODY>
 <div class="textCenter">
	<P class="imgSize"><img SRC="./images/image01.png"></P>
 </div>
</BODY>
</HTML>

◎ＣＳＳ

/* style CSS */
body {
	background-color: #ffffff;
}
.imgSize {
	max-width: 450px;	 /* 最大幅 */
	margin-right: auto;
	margin-left : auto;
}
P.imgSize img {
	width: 100%;
}
.textCenter{
	text-align: center;
}

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

上記のやり方ですと
ウインドウの横幅をドラッグして大きくしたり縮めたりしてみると
ウインドウの大きさに追従して画像が拡大、縮小され
指定した最大幅以上には拡大されないのですが
ウインドウの縦幅を小さくしたときに、画像が縮小されず
下にはみ出した状態になってしまいます。
これを、ウインドウが縦に短くなったときにも
縮小して全部表示されるようにしたいです。

いろいろ調べてみたのですが、縦横どちらの動きにも
追従する方法が見つけられませんでした。

すみませんが、ご教授お願いいたします。

追記：
イメージ的にこんな感じです（画像ソフトで作ったものです）

ウインドウの上下を縮めたとき

ウインドウの左右を縮めたとき

kei344

2016/08/25 03:00

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

sagume

2016/08/25 04:05

すみません、修正いたしました。

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

回答2件

ベストアンサー

こういう感じとか。

CSS
1img {
2  display: block;
3  max-height: 100vh;
4  max-width: 100vw;
5  margin: 0 auto;
6}
7```**動くサンプル：**[https://jsfiddle.net/9mjrchcj/](https://jsfiddle.net/9mjrchcj/)

投稿2016/08/25 06:22

kei344

総合スコア69398

sagume

2016/08/25 07:06

ご返信ありがとうございます。まさに！こういう動作にしたくて、しかもシンプルな記述で感激です。すみません、教えて頂いた部分について、なぜこうなるのか分からない部分が出てきてしまったのですが、 vh、vwといった単位を初めて知ったため、使い方を調べてみたのですが vw：ビューポートの幅の1/100 vh：ビューポートの高さの1/100 という単位なので、100vh、100vwと記述するとビューの高さ一杯、幅一杯に表示する。という意味になると思ったのですがビューの高さ、幅を目いっぱい広げた時に元の画像の大きさ以上にならないのはなぜなのでしょうか？重ねてすみませんが、こちらもご教授頂けましたら幸いです。

kei344

2016/08/25 07:11

「max-height / max-width」は「最大ここまで」なので、その数値を超えないように制限されます。だから、ビューポートの幅のほうが大きい場合は制限する必要が無いのでそのまま、だったと思います。

sagume

2016/08/25 07:15

なるほど、重ねてご回答いただき有難うございました。とても勉強になりました。

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

こんな感じでどうでしょうか。

.imgSize { 
margin-right: auto; 
margin-left : auto; 
} 
P.imgSize img { 
width: 100%; 
height: 100%;
max-width: 450px;     /* 最大幅 */ 
max-height: 450px;     /* 最大幅 */ 
} 
.textCenter{ 
text-align: center; 
}

投稿2016/08/25 00:48