フルードイメージ, フルードグリッド

フルードイメージ

次の１行をCSSに追記すると、大きいimgをベタ置きしても親のブロック要素のサイズに合わせて伸縮してくれます。

img { max-width: 100% }

背景も同様にbackgroundプロパティで画像をしている場合もbackground-sizeプロパティを一緒に指定することでコンテンツの可変に合わせて伸縮させることが可能です。

• auto 自動（デフォ）
• cover アス比維持で背景全体に画像を指定
• contain アス比維持で背景領域いっぱいになる最大サイズで表示
• px,%,emで幅と高さを指定

フルードグリッド

解像度により伸縮するリキッドレイアウトに対応したグリッドをフルードグリッドといいます。
グリッドデザインで絶対値で決めたピクセルを相対値の%に変換してフルードグリッド化させます。

計算方法: 変換したい値 / その親要素の幅 * 100 = 変換したい値の相対値

例えば、960pxのコンテンツ幅があるとして、その中の120pxの横幅の相対値を得たい場合は以下のようになります。

120 / 960 * 100 = 12.5%

%変換する際にどうしても端数が出てしまう場合があります。端数の扱いはブラウザによって繰り上げたり切り捨てたり扱いが異なります。１ピクセルのズレが致命的なスタイルの崩れになる場合もあるので、ブラウザチェックしながらの微調整が必要になります。