web-dev-qa-db-ja.com

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

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

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

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

htmlwidthcss
107
Alfonso

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

181
Fyodor Soikin

Googleの検索でこの投稿を見つけ、@ jwalの返信で私の​​問題を解決しましたが、彼のソリューションに1つ追加しました。

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

上記を使用して、イメージが含まれるコンテンツコンテナの寸法に最大幅を変更しました。この場合は、コンテナ幅-パディング-ボーダー=最大幅です。

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

私はIE 9、FireFox 18.0.2およびChrome 25.0.1364.97、Safari iOSでテストし、動作しているようです。

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

8
mattauckland

幅を100％に設定すると、元のフルサイズの画像ではなく、そのdivの幅全体になります。 JavaScriptまたは画像を測定できる他のスクリプト言語がなければ、それを行う方法はありません。 divの固定幅または固定高さ（幅200pxなど）を使用できる場合は、tooで画像に塗りつぶす範囲を与えるのは難しくありません。ただし、200x300ピクセルのボックスに20x20ピクセルの画像を配置すると、まだ歪んでいます。

3
Amanda

私も同じ問題を抱えていましたが、CSSの高さの値をautoに設定して、問題を修正しました。また、表示プロパティを行うことを忘れないでください。

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

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

.img_100 {
  width: 100%;
}
0
SandroMarques

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

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