[英]how do i create a photo collage with html css and 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;
}
请访问此链接https://mdbootstrap.com/docs/standard/extended/gallery/您可以看到使用 Bootstrap 制作的多种类型的画廊和拼贴画。
抱歉,我正在用工作图片发布另一个答案,其他图片不起作用,因为它们实际上不是网址
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.