異なる解像度での画像サイジングの問題

Question

2つの部分からなるヘッダーがあります。左の20％はイメージ（私たちのロゴ）を保持し、右の80％はナビゲーションなどを表します。

ヘッダーそのものの幅は、パーセンテージで表されます。高さはemで表されます。この結果、かなり流動的なレイアウトになります。唯一の問題のある領域はロゴです。コンテナと同じ寸法ではないため、特定の解像度では完全にフィッティングから、小さすぎるほど狭くなり、他の解像度では上に上がるようになります。

画像に適用される唯一のCSSは、コンテナ内部の幅とマージンです。

解像度に関係なく、ロゴがコンテナ全体に確実に埋め込まれるようにするにはどうすればよいですか？

Answer 1

ロゴのパーセンテージの幅も（コンテナを埋めるために100％）可能性があります。その際、ブラウザーの画像スケーリング能力が犠牲になり、場合によっては望ましい結果を下回る可能性があります。

つまり、ビューポート幅に基づく水平スケーリングとフォントサイズ設定に基づく垂直スケーリングという2つの全く異なる変数でスケーリングしているようです。私は柔軟性のためにあなたの目標に拍手を送っていますが、おそらくロゴ自体を拡大縮小する必要性を再考してください。ページ上のすべてを拡大縮小する必要はありません。

Answer 2

イメージやそのコンテナに最小幅を追加して、特定の程度まで「絞る」ことを確認することをお勧めします。