Question

我试图将两个图像并排放置（占据了身体的其余部分），但我的标题还没找到很好的解决方法。

我希望这两张图片成为两个不同页面的链接。

我尝试了不同的方法，但是没有一个起作用。

HTML：

<body>
    <div class="header">
        <div class="logo">
            <img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_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:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA 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

Answer 1

使用flexbox并设置padding:0和.container { display: inline-flex; margin:0; padding:0; } .box { width: 50%; margin:0; padding:0; }。

'.Input .InputElement'

Answer 2

使<a>标签成为block样式的元素，以使其整齐地包装您的图像。然后将图像拉伸到其父级的完整height和width上，并使用object-fit: cover使图像充满您的盒子。
这与将background-image设置为background-size的{{1}}具有相同的效果。

cover

.box a {
    display: block;
    width: 100%;
    height: 100%;
}

如何并排显示两个背景图像

2 个答案: