css中页眉旁边的图像位置

Question

我在网站上定位图片时遇到了一些麻烦。我想把这张主照片放在"；工作；页眉，并在更改窗口大小时将其缩放到位。(就像上面的段落一样(

此外，我该如何在主图像下添加两个图像，但同时添加两个？

任何帮助都会很棒。

.AboutMeContainer {
width: 100%;
display: flex;
justify-content: space-between;
}
.mainheaders {
color: rgb(101, 118, 143);
font-family: 'Trebuchet MS', Arial, sans-serif;
font-weight: lighter;
font-size: 40px;
font-weight: lighter;
padding-left: 95px;
}
.mainheaderscontainer {
display: flex;
padding-inline: 6px 20px;
border-right: 3px solid rgb(101, 118, 143);
}
.aboutMeParagraphContainer {
padding-inline: 20px;
padding-right: 80px
}
.Workcontainer {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
margin-left: 16px;
}
#mainworkcontainer {
padding-bottom: 100px;
justify-content: space-between;
}
.workImages {
justify-content: space-between;
}
.imagecard {
display: flex;
position: relative;
margin: 2rem;
float: right;
width: 45%;
opacity: 0.8;
margin-top: -240px;
border: solid rgb(101, 118, 143);
}
.imagecard:hover {
opacity: 1.0;
}
.imagecard:first-child {
width: 65%;
}
#bigimage {
height: 200px;
position: relative;
display: flex;
}

<header>
<h1>Lerantino</h1>
<nav class="topnav">
<ul>
<li><a class="AboutMe" href="">About Me</a></li>
<li><a class="Work" href=""> Work</a></li>
<li><a class="Contact Me" href="">Contact Me</a></li>
<li><a class="Resume" href="">Resume</a></li>
</ul>
</nav>
</header>
<div class="headerImage">
<img src="/Images/greenvalley-pictures-IPbClYwlSEA-unsplash.jpg">
</img>
<h2>Cool Subtitle Here!</h2>
</div>
<section>
<div class="AboutMeContainer">
<div class="mainheaderscontainer">
<h3 class="mainheaders">About<br>Me</h3>
</div>
<div class="aboutMeParagraphContainer">
<p class="aboutMeParagraph">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, quia? nipsum dolor sit amet consectetur, adipisicing elit. Ratione ut veritatis assumenda, harum magnam illum sit earum quia nemo consectetur repudiandae, perspiciatis libero optio
quidem quos porro nostrum enim sapiente molestias? Quo aut autem impedit expedita blanditiis aspernatur voluptatum nam. ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
<section>
<div class="Workcontainer">
<div class="mainheaderscontainer" id="mainworkcontainer">
<h4 class="mainheaders">Work</h4>
</div>
</div>
</section>
<section class="workImages">
<article class="imagecard" id="bigimage">
<img src="Images/B1B53B46-28D4-4E02-ADA5-018744EF7222_1_201_a.jpeg">
<section class="Title">
<div>Project</div>
</section>
</div>
</section>

Answer 1

我对布局和CSS做了一些更改。我做的一件事是给<img>的width: 100%

.AboutMeContainer {
width: 100%;
display: flex;
justify-content: space-between;
}
.mainheaders {
color: rgb(101, 118, 143);
font-family: 'Trebuchet MS', Arial, sans-serif;
font-weight: lighter;
font-size: 40px;
font-weight: lighter;
padding-left: 95px;

}
.mainheaderscontainer {
display: flex;
padding-inline: 6px 20px;
border-right: 3px solid rgb(101, 118, 143);

}
.aboutMeParagraphContainer {
padding-inline: 20px;
padding-right: 80px
}
.Workcontainer {
display: flex;
justify-content: space-between;
margin-top: 30px;
margin-left: 16px;
}
#mainworkcontainer {
padding-bottom: 100px;
justify-content: space-between;

} 
.workImages {
justify-content: space-between;
}

.column {
display: flex;
flex-direction: column;
align-items: center;
}

.row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}

.imagecard {
margin-left: 20px;
display: flex;
padding-inline: 20px;
padding-right: 80px;
opacity: 0.8;
border: solid rgb(101, 118, 143);
flex: 1;
height: calc(100% - 5px);
}
.imagecard:hover {
opacity: 1.0;
}
.imagecard img {
width: 100%;
}

<header>
<h1>Lerantino</h1>
<nav class="topnav">
<ul>
<li><a class="AboutMe" href="">About Me</a></li>
<li><a class="Work" href=""> Work</a></li>
<li><a class="Contact Me" href="">Contact Me</a></li>
<li><a class="Resume" href="">Resume</a></li>
</ul>
</nav>
</header>
<div class="headerImage">
<img src="/Images/greenvalley-pictures-IPbClYwlSEA-unsplash.jpg">
</img>
<h2>Cool Subtitle Here!</h2>
</div>
<section>
<div class="AboutMeContainer">
<div class="mainheaderscontainer">
<h3 class="mainheaders">About<br>Me</h3>
</div>
<div class="aboutMeParagraphContainer">
<p class="aboutMeParagraph">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, quia? nipsum dolor sit amet consectetur, adipisicing elit. Ratione ut veritatis assumenda, harum magnam illum sit earum quia nemo consectetur repudiandae, perspiciatis libero optio
quidem quos porro nostrum enim sapiente molestias? Quo aut autem impedit expedita blanditiis aspernatur voluptatum nam. ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
<section>
<div class="Workcontainer">
<div class="mainheaderscontainer" id="mainworkcontainer">
<h4 class="mainheaders">Work</h4>
</div>
<div class="column">
<div class="row">
<div class="big imagecard">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/473px-Jonquil_flowers06.jpg">
<section class="Title">
<div>Project</div>
</section>
</div>
</div>
<div class="row">
<div class="imagecard">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/420px-LotusBud0048a.jpg">
</div>
<div class="imagecard">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Detailaufnahme_Weihnachtsstern_-_gro%C3%9F.jpg/474px-Detailaufnahme_Weihnachtsstern_-_gro%C3%9F.jpg">
</div>
</div>
</div>
</div>
</section>