我的内容超出了我的 div 我尝试过文本对齐和溢出属性

Question

body {
font-family: Arial;
font-size: 15px;
}
.container {
position: relative;
max-width: 1800px;
height: auto;
margin: 0 auto;
text-align: center;
width: 90%;
}
.container img {
vertical-align: center;
}
.container .content {
position: absolute;
background: rgb(2, 2, 2);
background: rgb(5, 5, 5, 0.5);
color: rgb(255, 230, 0);
width: 100%;
padding: 5px;
text-align: center;
bottom: 0;
overflow: hidden;
}

<div class="container">
<img src="https://pm1.narvii.com/6599/ca35b7330ff3ca028be95e4ff1e005ebe822b825_hq.jpg" alt="Bruce Lee" style="width:90%;">
<div class="content">
<h2>The Dragon</h2>
<p>“Forget about winning and losing; forget about pride and pain. Let your opponent graze your skin and you smash into his flesh; let him smash into your flesh and you fracture his bones; let him fracture your bones and you take his life! Do not be concerned
with escaping safely- lay your life before him!!”.</p>
</div>
</div>

Answer 1

如果你想让它适合屏幕，设置body的最小高度为100vh。如果你想让底部的文本在顶部，改变html的顺序，把内容div放在图像上。