如何解决我如何使用 html css 和 bootstrap 创建照片拼贴
我尝试将图像添加到 div 中,但它对我不起作用,
<img
class="img-fluid"
src="https://via.placeholder.com/800x800"
style="border-radius: 20px"
/>
因此,我尝试向 div 添加背景图像,但是当我向 div 添加图像时,图像不会显示?谁能告诉我解决方案以及为什么会出现这种情况?
<div class="col-lg-6">
<!-- ??????? how do i create the grid -->
<div class="row g-0">
<div class="col-lg-4">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
<div class="col-lg-8">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-8">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
<div class="col-lg-4">
<div
class="imgcollage"
style="background-image: url(../img/img3.jpg)"
></div>
</div>
</div>
</div>
这里是css
.imgcollage {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
border-radius: 20px;
}
解决方法
对不起,我发布了另一个带有工作图片的答案,其他图片不起作用,因为它们实际上不是网址
.imgcollage {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
border-radius: 20px;
}
.col-lg-6{
display:grid;
/* declares how many columns there will automaticaly be and how big they will be +rows and how big of a gap between them*/
grid-template-columns: 250px 250px;
grid-template-rows: 250px 250px;
grid-gap: 15px;
<div class="col-lg-6">
<!-- ??????? how do i create the grid -->
<div
class="imgcollage"
style="background-image: url(https://images.pexels.com/photos/2253275/pexels-photo-2253275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)"
></div>
<div
class="imgcollage"
style="background-image: url(https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)"
></div>
<div
class="imgcollage"
style="background-image: url(https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)"
></div>
<div
class="imgcollage"
style="background-image: url(https://images.pexels.com/photos/2623968/pexels-photo-2623968.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)"
></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。