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

背景サイズに基づいて動的な Div 高さ調整を実現する方法

Div 要素は Web デザインにおいて重要な役割を果たし、開発者は柔軟な Web デザインを可能にします。そしてレスポンシブなレイアウト。ただし、特定の高さの値を明示的に定義せずに背景画像のサイズに合わせて div の高さを設定することになると、困難になる可能性があります。

問題ステートメント

割り当てられた背景の寸法に基づいて高さを自動的に調整するように div を構成するにはどうすればよいですか?画像?

回答

このシームレスな調整を実現するには、画像のアスペクト比と CSS プロパティ「padding-top」を活用する賢いアプローチが必要です。その仕組みは次のとおりです。

div の高さを 0 に設定し、基本的に非表示にします。
画像の幅に対する高さの割合を計算します。
div をこのパーセンテージ値に変換します。
CSS の例コード:

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

説明:

• padding-top プロパティは、画像のアスペクト比を維持しながら、div を垂直に引き伸ばします。
• div の高さはそのままです。 0、画像に基づいて動的に拡大または縮小できます。 size.

作業例

このテクニックの動作を示すプロトタイプは次のとおりです: http://jsfiddle.net/8m9ur5qj/.

このアプローチに従うことで、背景画像のサイズに合わせて高さを簡単に調整する div 要素を作成でき、視覚的に調和のとれた応答性の高いレイアウト。

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