包含4张不同尺寸图像的封面？

Question

我昨天发布了一个question，有人提出了一个similar question with answers不能解决这个问题，但我的问题已经关闭。所以我在这里，再次提出更多解释。

我希望它覆盖页面的整个宽度，但高度为590px。

我该如何实现？如果可能的话，请提供一个代码片段，以了解具体操作方法。

使用Bootstrap 4.4

这就是我想要的；

这里是代码段；

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row no-gutters">
        <div class="tile col-lg-6">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
        </div>

        <div class="tile col-lg-6">
            <img class="lazy" src="https://image.freepik.com/free-photo/fiery-orange-sunset-sky-warm-light-with-clouds-beautiful-background_9511-97.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">

            <div class="row no-gutters">
                <div class="tile col-lg-6">
                    <img src="https://img5.goodfon.com/wallpaper/nbig/5/60/4k-ultra-hd-background-sunset-dark-twilight-sky-clouds-natur.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>

                <div class="tile col-lg-6">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>
            </div>
        </div>
    </div>

Answer 1

这是通过CSS-Grid可以实现如图所示的效果的方法。

您要做的就是设置网格及其度量（在#grid中完成），然后给每个孩子一个grid-column-start和grid-row-start编号（grid-column和grid-row中的第一个数字）和一个grid-column-end和grid-row-end（最后一个数字）。剩下的就是魔术。

（（在CSS-Grid中，它实际上不是行号和列号，您引用的是网格线，可以在Chrome或Firefox开发工具中轻松显示它们。）

您可以在此处阅读有关CSS-Grid中基于行的放置的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

要向其中添加图像，只需将像这样的背景图像放置在图像容器中：

background-image: url(yourimage.jpg);
background-size:cover;

就这样。很酷的东西，如果你问我。每个人都应该看看CSS-Grid。

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px repeat(4, 1fr);
  width: 100vw;
  height: 590px;
}

#navbar {
  background: blue;
  grid-column: 1 / 5;
  grid-row: 1 / 1;
}

#image1 {
  background: cyan;
  grid-column: 1 / 3;
  grid-row: 2 / 6;
}

#image2 {
  background: orange;
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

#image3 {
  background: magenta;
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

#image4 {
  background: brown;
  grid-column: 4 / 5;
  grid-row: 4 / 6;
}

<div id="grid">
  <div id='navbar'></div>
  <div id="image1"></div>
  <div id="image2"></div>
  <div id="image3"></div>
  <div id="image4"></div>
</div>