如何并排显示两张背景图片
如何并排显示两张背景图片
提问于 2019-08-29 05:12:13
我试着把两个图像并排放在我的头下面(占据身体的其余部分)，但我还没有找到好的解决方案。
我希望这两个图像是两个不同页面的链接。
我试过不同的方法，但都不管用。
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回答 2
Stack Overflow用户
发布于 2019-08-29 05:14:48
使用flexbox并设置margin:0和padding:0。
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}Stack Overflow用户
发布于 2019-08-29 05:26:34
使<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57700096
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号