2011-08-05 7 views
0

CSS(完全に%のもの)で完全に流動的なレイアウトを作成しようとしていますが、これはプラットフォーム間でシームレスに動作します(iPadのようなデスクトップ/モバイル/タブレット)。CSS流体レイアウトと画像

流体レイアウトでは、画像を完全に流動させることができますか?たとえば:

img { max-width:100%; } 
  • これは/任意の範囲またはウィンドウのサイズにフィット調整しますということですか?
  • これも背景画像にも適用できますか?
  • このプロパティは、ブラウザの実装など何か制限がありますか?

答えて

1

あなたが提供するスニペットは、画像のための最大幅が100%であることを述べています。これは、ブラウザウィンドウまたはデバイスビューポートより広いことを意味しない可能性があります。それは、相対的にポスタリゼーションされた親ノードよりも広いことも意味しない。しかし、ウィンドウが十分大きければ、イメージはそのネイティブサイズでレンダリングされます。

背景画像自体がタイルまたは元のサイズに基づいて配置されているため、背景画像には適用できません。 max-widthトリックはコンテンツイメージではほとんど役に立ちますが、あまりレイアウトやスタイリングイメージでは役に立ちません。

で、IE6はそれをまったくサポートしていません。しかし、その市場はかなり小さく、縮小しているので、おそらくあなたはその問題を無視することができます。

0

あなたのコードは、親の幅を基準にした画像のサイズを意味します。したがって、画像の幅が500ピクセルで、画像の幅が最大500ピクセル、またはそれ以下、またはそれ以下である可能性があります。最大幅の詳細についてはW3.org max-width

これは少し異なっていますが、これにはbackground-size: x y;を使用できます。これはCSS3であり、古いブラウザではサポートされていません。背景サイズの詳細については、W3.org background-size

関連する問題