画像の幅を親divの100％にするが、それ自体の幅より大きくしない

画像（動的に配置され、寸法に制限はありません）を親divと同じ幅にしようとしていますが、その幅が100％の独自の幅よりも広くない場合に限ります。私はこれを試しましたが、役に立ちませんでした：

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

これらの画像の多くは親divよりも幅が広いため、それに応じてサイズを変更したいのですが、小さな画像がそこに表示され、通常の寸法を超えて拡大されると、本当にひどく見えます。これを行う方法はありますか？

max-width: 100%単独で指定するだけで十分です。

Googleの検索でこの投稿を見つけ、@ jwalの返信のおかげで私の問題は解決しましたが、私は彼の解決策に1つ追加しました。

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

上記を使用して、max-widthを、画像が含まれているコンテンツコンテナーのサイズに変更しました。この場合は、コンテナーの幅-パディング-ボーダー=最大幅です。

このようにして、画像が含まれているdivから抜け出すことはなく、コンテンツdiv内で画像をフロートさせることができます。

IE 9、FireFox 18.0.2、Chrome 25.0.1364.97、Safari iOSでテストしましたが、動作するようです。

追加：私はこれを678px（最大幅）で表示される幅1024pxの画像と、500px（画像の幅）で表示される幅500pxの画像でテストしました。

幅を100％に設定すると、元のフルサイズのイメージではなく、divの全幅になります。JavaScriptや画像を測定できる他のスクリプト言語なしでは、これを行う方法はありません。あなたは（ワイド200pxのような）div要素の固定幅または固定の高さを持つことができる場合、すべきではない、あまりにもいっぱいに画像に範囲を与えることは難しいです。ただし、20x20ピクセルの画像を200x300ピクセルのボックスに入れても、画像は歪んでしまいます。

ラインスタイルで-これはいつも私にとってうまくいきます

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

最大幅を設定する必要があります。必要に応じて、側面の1つにパディングを設定することもできます。私の場合、max-width：100％は適切でしたが、画像は画面の端のすぐ隣にありました。

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

私も同じ問題を抱えていましたが、CSSの高さの値をautoに設定して、問題を解決しました。また、displayプロパティを実行することを忘れないでください。

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

私はうまくいった答えを見つけました、そして次のリンクで見つけることができます：

制限された幅の親の全幅コンテナ

画像が親よりも小さい場合...

.img_100 {
  width: 100%;
}

プロパティを使用します display: table-cell

こちらがリンクです