javascript - 两栏三图组合布局

Question

我只是想通过 <img src="" alt="" /> 制作流畅的响应式布局标签，但我是通过背景图片做到的。

有什么方法可以用 img 做这个布局吗？标签？

XD 示例

前端代码

html,
body {
  height: 100%;
  width: 100%;
}

.cmd-three-img-container {
  margin-bottom: 30px;
  height: 250px;
  display: flex;
}

.cmd-main-img {
  position: relative;
  width: 50%;
  height: 100%;
  margin-left: 5px;
  background: url(https://i.imgur.com/9Q9pgmR.jpg);
  background-size: cover;
  background-position: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cmd-img-stacked {
  width: 50%;
  height: 100%;
}

.cmd-img-overlay {
  padding-right: 10px;
  padding-top: 10px;
}

.cmd-img-overlay h4 {
  float: right;
  font-size: 18px;
  color: #fff;
}

.cmd-top-img,
.cmd-bottom-img {
  width: 100%;
  height: calc(50% - 2.5px);
}

.cmd-top-img {
  background: url(https://i.imgur.com/9Q9pgmR.jpg);
  background-size: cover;
  background-position: center;
  border-top-left-radius: 4px;
}

.cmd-bottom-img {
  background: url(https://i.imgur.com/hxiPgcK.jpg);
  background-size: cover;
  background-position: center;
  border-bottom-left-radius: 4px;
}

.cmd-top-img {
  margin-bottom: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">

    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6">
      <div class="cmd-three-img-container">
        <!-- top level image container START-->

        <div class="cmd-img-stacked">
          <!--stacked img container -->
          <div class="cmd-top-img">
          </div>
          <div class="cmd-bottom-img">
          </div>
        </div>
        <div class="cmd-main-img">
          <!--Main image -->
          <div class="cmd-img-overlay">
            <!--overlay div -->
            <h4>Office</h4>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

您只需在父列中拆分子列并添加 bootstrap 4 默认类 d-flex align-items-stretch h-100 拉伸(stretch)图像直到列结束。根据您的要求分别为 Angular 设置 border-radis。我希望这个例子能让你找到解决方案。

.row.eqcol {
    padding-right: 10px;
}
.row.eqcol div[class^="col-"] {
    padding: 0;
    padding-right: 5px;
}
.text-overlay h3 {
    font-size: 20px;
    color: #fff;
}
.text-overlay {
    position: absolute;
    font-size: 14px;
    top: 5px;
    right: 5px;
}
.cmd-three-img-container {
    position: relative;
}
.cmd-three-img-container img {
    object-fit: cover;
    padding-bottom: 5px;
    width: 100%;
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container my-3">
    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div class="row eqcol">
                <div class="col-6">
                    <div class="cmd-three-img-container left-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                    </div>
                </div>
                <div class="col-6">
                    <div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <div class="text-overlay">
                            <h3>Office</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="row eqcol">
                <div class="col-6">
                    <div class="cmd-three-img-container left-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                    </div>
                </div>
                <div class="col-6">
                    <div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <div class="text-overlay">
                            <h3>Office</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="row eqcol">
                <div class="col-6">
                    <div class="cmd-three-img-container left-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                    </div>
                </div>
                <div class="col-6">
                    <div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <div class="text-overlay">
                            <h3>Office</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="row eqcol">
                <div class="col-6">
                    <div class="cmd-three-img-container left-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                    </div>
                </div>
                <div class="col-6">
                    <div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
                        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
                        <div class="text-overlay">
                            <h3>Office</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>