web-dev-qa-db-ja.com

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

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

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

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

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

htmlcssimageimage-resizing
62
user1315305

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

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

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

101
sandeep

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

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

img.Image{
    display: inline-block;
}
3
Kamlesh Uikey

コンテナの幅が600ピクセルの場合。

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

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

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

#ImageContainer img {
    width: 600px;
}
3
Leo Armentano

これを試して

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

あなたのCSSはほぼ正しいです。画像cssにdisplay: block;がありません。また、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>
0
Rhythm Ruparelia