我正在尝试将两个图像并排放置(占据身体的其余部分(在我的标题下方，但我还没有找到很好的解决方案。
我希望这两个图像是两个不同页面的链接。
我尝试过不同的东西，但没有一个奏效。
.HTML：
<body>
<div class="header">
<div class="logo">
<img src="C:UserscristovaoDocumentsvscodereal_estateiconslogo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
<a href="./home.html">Home</a>
</li>
<li>
<a href="./project.html">Projects</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:UserscristovaoDocumentsvscodereal_estateIMAGENSCASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
.CSS：
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
使用 flexbox 并设置margin:0和padding:0。
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
将<a>标签设置为block样式的元素，以便它整齐地包装您的图像。然后将图像拉伸到其父图像的完整height和width，并使用object-fit: cover使图像填充您的框。
这将具有与background-size设置为cover的background-image相同的效果。
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}