質問のタイトルが間違った方法で表現されている可能性があります。
画像が幅または高さの100％を占めるようにしたい（どちらか大きい方だと思います）。フォトビューアーを持っていて、側面または上部に黒い境界線がある場合のようなものです。
明らかに、それが非常に小さな画像である場合、それを引き伸ばしたくありません。どの画像も引き伸ばしたくありません。できる限りウィンドウをいっぱいにしたいだけです。
たとえば、Google で画像を読み込むと、最大解像度では表示されません。大きすぎる場合は、ページの境界内に収まるように縮小します。その後、必要に応じてクリックして拡大できます。
どうすればこれを達成できますか? ありがとう。
実際には次のものが必要になると思います。
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
これには、明示的な高さが設定されたコンテナーが機能する必要があります。
例：
これは、CSSだけで簡単に実現できます。
.container img {
max-width: 100%;
height: auto;
}
は、コンテナのmax-width幅の100％を超えないようにします。height画像のサイズを通常どおりに設定するようにブラウザに指示し（たとえば、画像を幅方向に拡大することはありませんが、高さ方向に拡大することはありません）、古いブラウザに含まれています。
もちろん、幅ではなくコンテナの高さを一致させたい場合は、これを逆にすることもできます。
編集：
pburgessが示唆しているように、画像を幅または高さのいずれかに一致させたい場合は、両方を宣言する必要があります。このjsfiddleを参照してください：http：//jsfiddle.net/XxgkG/
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
これはIE6では機能せず、IE7では不安定であることに注意してください。これらの悲しい、孤独なブラウザをコーディングしている場合は、この回答を確認する必要があります。