サイズ変更時に画像にテキストを含める

Question

画像に段落を含めたいのですが、常にオーバーフローしてしまいます。

画像のサイズを段落と同じ長さに変更したいと考えています。

min-height を使用しようとしましたが、機能しません。

.イメージコンテナ{
  位置: 相対的;
  最小高さ:100vh;
  幅: 100%;
  コンテンツの位置揃え:中央;
  整列項目:中央;
  ディスプレイ:フレックス;
}

.トラックイメージ{
  位置: 相対的;
  上:50ピクセル;
  オブジェクトフィット: カバー;
  幅:100%;
  高さ:100%;
}

.text-container{
  位置: 絶対;
  上:110ピクセル;
  左:0;
  パディング左: 100px;
  幅:30%;
  色:白;
  z インデックス:3;
}

min-height を使用すると、サイズ変更時にコンテナーのサイズが画面に合わせて変更され、画像のサイズも変更されるのではないかと想像しましたが、そうではありません。

Answer 1

物事を逆に見ることをお勧めします。

親の高さを設定する必要があるテキストなので、絶対値は機能しません。

画像を親の背景画像として設定し、親がテキスト サイズに従うようにすると、(指定されたサイズのカバーの) 画像が必要なスペースを自動的に埋めます。

これは、指定した 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
    テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行
テキスト行