"我正在缩小屏幕宽度，但段落的文本覆盖了图像，我应该做什么更改来防止覆盖文本">
"这是网站建设的一部分，我试图在代码中使用一些css3属性，但无法解决问题">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 600px;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
将图像上的width: 600px更改为width: 100%。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 100%;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
您需要将图像宽度设置为100%，以便根据其父宽度(div(进行拉伸或收缩。div父容器设置为其父容器(即窗口(的40%。
话虽如此，你的填充仍然是"px"，所以与你的窗口不成比例。当你的窗口缩小很多时，与窗口大小相比，你最终会得到很多填充。也要考虑改变这些价值观。