二列三圖組合布局

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拉伸圖像直到列結束。 根據您的要求分別為角設置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>