97

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

CSS プロパティを試しましたmax-widthが、うまくいきません。画像のサイズが変わりません。

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

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 フォルダーの外に保存されます)。

4

7 に答える 7

152

次のように書くことができます：

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

これをチェックしてくださいhttp://jsfiddle.net/ErNeT/

于 2012-06-18T08:09:07.727 に答える
3

コンテナの幅が 600px だとします。

それより大きな画像だけを入れたい場合は、以下を追加してください: CSS:

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

すべての画像を使用可能な (600px) スペースに収めたい場合:

#ImageContainer img {
    width: 600px;
}
于 2016-02-02T11:12:05.630 に答える
1

これを試して

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}
于 2012-06-18T08:11:23.033 に答える
0

あなたの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>

于 2016-08-17T06:08:53.697 に答える