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