CSSで画像の最大幅を設定する方法

私のウェブサイトでは、ユーザーがアップロードした画像を特定のサイズ（width: 600px）の新しいウィンドウに表示したいと思います。問題は、画像が大きくなる可能性があることです。したがって、これらよりも大きい場合は600px、アスペクト比を維持したままサイズを変更したいと思います。

max-widthCSSプロパティを試しましたが、機能しません。画像のサイズは変更されません。

この問題を解決する方法はありますか？

HTML：

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS：

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

max-width: 600px画像の設定も試みましたが、うまくいきません。画像はサーブレットからストリーミングされます（Tomcatのwebappsフォルダーの外部に保存されます）。

あなたはこのように書くことができます：

img{
    width:100%;
    max-width:600px;
}

これを確認してくださいhttp://jsfiddle.net/ErNeT/

私はこれが最終的なものとして答えられていないようです。

最大幅が100％、幅が600であることがわかります。それらを反転します。

簡単な方法も次のとおりです。

     <img src="image.png" style="max-width:600px;width:100%">

私はこれを頻繁に使用しますが、個々の画像を制御することもできますが、すべてのimgタグに含めることはできません。以下のようにCSSすることもできます。

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

問題は、imgタグがインライン要素であり、インライン要素の幅を制限できないことです。

したがって、最初にimgタグの幅を制限するには、それをインラインブロック要素に変換する必要があります

img.Image{
    display: inline-block;
}

コンテナの幅が600pxの場合。

それよりも大きな画像だけを中に収めたい場合は、次を追加します。CSS：

#ImageContainer img {
    max-width: 600px;
}

すべての画像に使用可能な（600px）スペースを使用させたい場合：

#ImageContainer img {
    width: 600px;
}

これを試して

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

あなたのCSSはほぼ正しいです。display: block;画像のCSSが欠落しているだけです。また、IDに1つのタイプミスがあります。そのはず<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }

<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>