我如何使用 html css 和 bootstrap 创建照片拼贴画

Question

我尝试将图像添加到 div 它对我不起作用，

<img
                  class="img-fluid"
                  src="https://via.placeholder.com/800x800"
                  style="border-radius: 20px"
                />

因此我尝试将背景图像添加到 divs，当我将图像添加到 divs 时图像不会显示？谁能告诉我解决这个问题的方法以及为什么会这样？

<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;
}

Answer 1

抱歉，我正在发布另一个带有工作图片的答案，其他图片没有工作，因为它们实际上不是 url

.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>

我如何使用 html css 和 bootstrap 创建照片拼贴画

how do i create a photo collage with html css and bootstrap

html

css

bootstrap-4

bootstrap-grid

bootstrap-5