我正在尝试获取块部分的背景来封装图像，或者对里面的内容做出响应。老实说，我甚至不知道我想问什么，我只想让空白区对图像大小做出反应，这样我就可以在我的"关于我"部分的设置块后面有一个背景颜色/图像。我试过扰乱填充/边距，但似乎无法正确完成。如果图像没有加载，我在下面有我的.html和.css代码
代码
产品
html {
position: relative;
min-height: 100%;
}
body {
background-color: lightskyblue;
}
hr {
border: 0;
clear: both;
display: block;
width: 100%;
background-color: #212529;
height: 1px;
}
.block {
background-color: #fff;
padding: 30px;
margin-bottom: 30px;
}
.photo {
float: left;
height: 320px;
width: 320px;
margin: 0 20px 10px 0;
}
html {
position: relative;
min-height: 100%;
}
main {
margin: 80px 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Jake's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="index.html" id="logo">
<h1>Jacob Beeson</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<section class="row">
<div class="col-md-12">
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
</article>
</div>
</section>
</main>
</body>
<footer>
</footer>
</html>在<p>I am a ...</p>之后需要<div style="clear:both"></div>
您的article块应该如下所示：
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
<div style="clear:both"></div>
</article>
另请参阅此小提琴：https://jsfiddle.net/j8Lacshf/