画像に段落を含めたいのですが、常にオーバーフローしてしまいます。
画像のサイズを段落と同じ長さに変更したいと考えています。
min-height を使用しようとしましたが、機能しません。
.イメージコンテナ{ 位置: 相対的; 最小高さ:100vh; 幅: 100%; コンテンツの位置揃え:中央; 整列項目:中央; ディスプレイ:フレックス; } .トラックイメージ{ 位置: 相対的; 上:50ピクセル; オブジェクトフィット: カバー; 幅:100%; 高さ:100%; } .text-container{ 位置: 絶対; 上:110ピクセル; 左:0; パディング左: 100px; 幅:30%; 色:白; z インデックス:3; }
min-height を使用すると、サイズ変更時にコンテナーのサイズが画面に合わせて変更され、画像のサイズも変更されるのではないかと想像しましたが、そうではありません。
P粉6270270312024-03-21 10:37:22
物事を逆に見ることをお勧めします。
親の高さを設定する必要があるテキストなので、絶対値は機能しません。
画像を親の背景画像として設定し、親がテキスト サイズに従うようにすると、(指定されたサイズのカバーの) 画像が必要なスペースを自動的に埋めます。
これは、指定した CSS に基づく簡単な例です:
.イメージコンテナ { 位置: 相対的; 最小高さ: 100vh; 幅: 100%; コンテンツの位置揃え: 中央; 整列項目: 中央; ディスプレイ: フレックス; 背景画像: url(https://picsum.photos/id/1016/1024/768); 背景サイズ: カバー; } .text-container { 位置: 相対的; 上: 110ピクセル; 左: 0; パディング左: 100px; 幅: 30%; 色: 白; z インデックス: 3; }
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
1 行のテキスト
a テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
行テキスト
テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行
a テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
行テキスト
テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行
a テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
行テキスト
テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行
a テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
行テキスト
テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行 テキスト 1 行
a テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
返事0キャンセル