ページの上部に大きな表紙画像を配置する必要があります。960px のコンテンツ ラッパーよりも幅が広いので、その外側に配置しますが、幅が原因でページが水平方向にスクロールされるのは望ましくありません。スクロールに関してコンテナに特定の子を無視させる確立された方法はありますか?
私の最初の考えは、100% 幅の div の中央の背景にすることでしたが、画像は動的であり、CSS によって割り当てられるべきではありません。
画像に設定できますmax-width:100%
。これにより、フルサイズでは大きすぎる場合に収まるように縮小されます (height
設定されていないか、または のいずれかであることを確認してくださいauto
) 。
または、背景画像を使用することもできますが、「画像」部分none
は外部 CSS に含めます。src="path/to/image.png"
次に、あなたが持っている場所に<img />
、代わりに置くだけですstyle="background-image:url('path/to/image.png');"
コンテナーの幅に合わせて画像をスケーリングするか ( max-width: 100%;
)、overflow-x: hidden;
画像の親要素に設定して、水平方向にオーバーフローするものをすべて非表示にする (スクロールバーを回避する) ことができます。