Div の高さを背景画像のサイズに合わせて自動的に調整するにはどうすればよいですか?

背景サイズに基づく div の高さの自動化

Web 開発では、多くの場合、div の高さを背景のサイズに合わせて自動的に調整することが望ましいです。その背景画像。ただし、div に特定の高さを設定すると、この機能が妨げられる可能性があります。

解決策:

狡猾なテクニックは、padding-top プロパティを利用することです。 div の高さを 0 に設定し、背景画像の幅と高さの比率に基づいてパディングトップを計算することにより、div は img 要素の動作を模倣し、背景画像に合わせて自動的にサイズ変更できます。

コード例:

次の CSS について考えてみましょう。 code:

div {
    background-image: url('image.png');
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 0; 
    padding-top: 66.64%; /* (img-height / img-width * container-width) */ 
}

この例では、背景画像 (幅 1280 ピクセル x 高さ 853 ピクセル) の比率 (この場合は 66.64%) に基づいて div のサイズが自動的に変更されます。高さを 0 に設定し、padding-top をパーセンテージとして使用すると、div は高さが自動調整されているかのように表示されます。

この手法により、div の高さまたは最小高さを手動で設定する必要がなくなります。 div を使用し、さまざまなサイズの画像に動的ソリューションを提供します。

以上がDiv の高さを背景画像のサイズに合わせて自動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。