9

境界ボックスは約 1000x600 で、500x100 の画像もあれば、400x100 の画像もあります (極端な例)。ここで、バウンディング ボックスが処理できる最大サイズまで両方を拡大縮小したいと思いますが、拡大縮小は維持します。

img {
  width: 100%;
  height: 100%;
}

画像の縮尺を維持しません。

4

7 に答える 7

8

幅のみまたは高さのみを 100% に設定できます。例えば

img {
    width: 100%;
}

また

img {
    height: 100%;
}

これにより画像の縮尺は維持されますが、画像がコンテナーからはみ出す可能性があります。

これはすべてのブラウザーで機能するとは限りませんが、Firefox、Chrome、Opera の最新バージョンでは機能します。私は過去にこれについて奇妙な経験をしたことがあり、私の解決策はサーバー上の新しい画像サイズを計算することでした.

于 2012-04-14T23:06:02.600 に答える
7

このスレッド (ビューの幅を変更し、CSS で画像の縦横比を維持する) と List Apart の記事 ( http://alistapart.com/article/fluid-images ) を読み、すべてをまとめるまで、これに苦労していました。

あなたのマークアップがこのような場合...

<img src="myImg.jpg" />

...次に、単に述べる

img {
    width:100%
}

最新のブラウザのほとんどは、選択肢が与えられたほとんどの人が画像の外観を変更したくないことを認識しているため、これで十分なはずです。ただし、マークアップに次のようなディメンション属性が含まれている場合...

<img src="myImg.jpg" width="400" height="400" />

...これはより良いテクニックであることを意図しており、マークアップはCSSを通過して、画像を固定の高さで柔軟な幅に保ちます（うーん！）...

img {
    width:100%;
    height:inherit;
}

...また...

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

どちらも機能しているようで、画像を正しいアスペクトに戻します。

私は自分自身でこの問題に出くわしました (私の WYSIWIG エディターはデフォルトで画像に薄暗い色を追加します - 簡単な解決策が必要であるか、この動作を停止するために JCE をハッキングするのに何時間も費やす必要がありました)、まだ徹底的にテストしていませんが、あなたが私と同じ問題を抱えているなら、あなたは良い出発点です.

于 2013-04-15T12:07:35.413 に答える
2

CSSだけでこれを行う方法があるかどうかはわかりません。このようなことを達成したい場合 は、スーパーサイズを使用できます

または、古いブラウザーを気にしない場合は、CSS3background-sizeプロパティを調べることができます。具体的には、設定でbackground-size: coverうまくいくと思います。

編集- 誤解しました。あなたが実際に望むのはbackground-size: contain.

于 2012-04-14T22:58:57.623 に答える
1

幅または高さのみを設定しても常に機能するとは限らないため、代わりに次のように設定できます。

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

しかし

元のサイズを超えて画像を拡張することはありません

于 2016-01-18T14:54:18.643 に答える
1

このA List Apart の記事が大いに役立つと思います。アスペクト比を維持しながらコンテナーに適応するレスポンシブ イメージについて説明しています。

基本的に、 を格納し、<img>そのコンテナの寸法を に適用max-width:100%するよりも指定するだけで、<img>適応します。義務的な IE の考慮事項については、記事の残りの部分をお読みください (ありがたいことに IE7+ ではサポートされています)。

于 2012-04-14T23:39:44.053 に答える
0

そんなことはできません。width画像要素とheight属性を編集できます...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" />

widthとheightをピクセルまたはパーセントに設定できます。pxピクセルを使用する場合は記述する必要はありませんが、%パーセンテージを使用する場合は記述する必要があることに注意してください。だからあなたは次のようなことができます...

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

...しかし、それは親要素の幅と高さの 100% になります。そのため、親要素とそのサイズを把握しておいてください。

于 2012-04-14T23:01:47.763 に答える