两列三图组合布局答案

【问题标题】：Two column three image combination layout两列三图组合布局
【发布时间】：2019-05-06 14:49:53
【问题描述】：

我只是想通过<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>

【问题讨论】：

你可以使用img + javascript
可以通过代码详细说明吗？
$('.imagebox').each(function () { $(this).find('img').addClass('imgtag'); var imgSrc = $(this).find ('.imgtag').attr('src'); imgSrc = "url(" + imgSrc + ")"; $(this).css("背景图片", imgSrc); });
我想说给每个<img/>元素display: block。然后用<div/> 容器包围每个包含 3 个图像的块。然后开始在图像上摆弄float: left。那应该指向正确的方向。显然，每个<div/> 容器也应该在它们自己的容器中，以使它们彼此相邻。或者为此使用引导行/列。
抱歉，出于习惯使用了Materialize CSS 样式。虽然如果您的项目还不太大，我建议使用 Materialize 而不是 Bootstrap。它更容易，更专业。与 Bootstrap 不同，它不会干扰您的预期设计，并为您提供真正的移动菜单，而不是奇怪的下拉菜单。

标签： javascript html css flexbox bootstrap-4

【解决方案1】：

您只需在父列中拆分子列并添加引导程序 4 默认类d-flex align-items-stretch h-100 拉伸图像直到列结束。根据您的要求分别为角落设置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>

【讨论】：