0

私はこの液体レイアウトのことはまったく初めてです。私たちのほとんどと同じように、私のレイアウト コンポーネントのほとんどは "液化" しますが、残念ながら画像はそうではないことに気付きました。

max-width: 100%そのため、いくつかの場所で提案されているように、画像を使用しようとしています。

ただし、 img containermax-widthのとの定義にもかかわらず、imgはスケーリングしません。min-height

広い解像度で見ると、たとえば「子供の画像」が拡大縮小されていないことに気付くでしょう。

問題が何であるかについての手がかりはありますか?なぜその画像は拡大縮小されませんか?

テストケース：

ブラウザ: Firefox 15.0 / Chrome 21.0

IOS: MAC OS X ライオン - 10.7.3

解像度: 1920x1200

私が得るもの： コンテナの最後まで拡大縮小されない画像を取得します。img の幅は、articleそれを含む要素に収まりません。 画像は矢印が示すようにスケーリングする必要があります

私が期待していること： コンテナの最後に到達するまで、画像が拡大することを期待しています。視覚的には、画像の右側が下の段落の右側と垂直方向に整列するように、画像がすぐ下の段落と同じ幅になることを期待しています。

4

3 に答える 3

1

あなたは何をするのか誤解していると思いますmax-width。

max-width:100%「この要素の最大幅はコンテナの 100% です」という意味です。自然に小さいものは影響を受けません。それはあなたが今持っているものであり、適切に機能しています。を使用max-width:800pxすると、「この画像の幅を 800 ピクセル以上にしないでください」という意味になり、800 ピクセルの幅を強制することはありませんwidth。

width:100%「この要素は常にコンテナの 100% の幅でなければならない」という意味です。通常はこれよりも小さいものはすべて、幅全体を占有する必要があります。それより大きいものはコンテナの幅に縮小されます。

あなたの場合、width:100%実際の画像を使用して、実際の最大値に合うようにサイズを調整してください（コンテナの適切な最大幅を選択してください）。画像は通常、拡大するよりも縮小した方が見栄えがよくなりますが、モバイル デバイス向けに最適化する場合は、逆の操作を行うことをお勧めします。

通常、デフォルトのスタイルとして表示される理由max-width:100%は、画像がコンテナーを超えて拡張されたり、レイアウトが崩れたりしないようにするためです。画像は通常、実際の幅によって自然にサイズ調整されるためです。

于 2012-08-30T22:04:31.923 に答える
0

私にとって、あなたの画像はビューポートのサイズを変更してスケーリングしています。ただし、max-width の代わりに、幅だけを使用してください。しかし、それは両方で動作します。

于 2012-08-30T18:53:27.270 に答える
0

幅300pxの画像がある場合、私の理解が得られる限り（画像は幅300pxで作成されることを意味します）

現在、この画像は、幅がコンテナーの 40% である div 内にあります (私の場合は body です)。

img widht:100% を指定すると、div の幅が 500px (全身の幅の 40%) である場合、イメージはそのコンテナー (私の場合は div) と同じ幅になります。

img max-width:100% を指定すると、画像の最大幅が常に 300px になることを意味します (つまり、作成時の元の幅が何であれ)

max-width は、画像の px の透明度を維持するのに本当に役立ちます

于 2014-07-16T06:15:53.563 に答える