封面有 4 张不同尺寸的图片？答案

【问题标题】：Cover page with 4 images of different sizes?封面有 4 张不同尺寸的图片？
【发布时间】：2020-06-19 11:24:14
【问题描述】：

我昨天发布了question，有人建议similar question with answers 无法解决此问题，但我的问题已关闭。所以我在这里，再次询问更多解释。

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

我如何做到这一点？如果可能的话，一个代码 sn-p 究竟如何做到这一点。

使用 Bootstrap 4.4

这就是我想要的；

这里是一个代码sn-p;

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

【问题讨论】：

你已经很接近了，你的图片的原始比例呢，如果比例不好，你是要拉伸它们还是剪掉它们的一部分？简单的例子，不是你想要的，而是澄清我的评论/问题codepen.io/gc-nomade/pen/yLNPaog
@G-Cyrillus 好的，示例是封面图片和此页面 (airbnb.com/rooms/…) 之后的 crit-research.it/it。请在大屏幕上打开。
我想保持它们的原始状态，但尺寸要小一些。
好的，你的图片必须有四种尺寸，一个大的，一个小一半的高度和最后 2 一半的高度和宽度，那么它应该可以使用 width:100%第一个 2 ，然后是最后两个的 50%。尺寸与这些不匹配的图像将需要传递 flex 行为和对象匹配，而如果比率匹配在一起，float:left 将完成这项工作（在前 2 个较大的情况下）。
您可以使用砖石布局，也可以使用新奇的 css 网格

标签： css twitter-bootstrap bootstrap-4 flexbox css-grid

【解决方案1】：

这就是使用 CSS-Grid 实现如图所示的效果的方法。

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

（在 CSS-Grid 中，它实际上不称为行号和列号，您引用的是 Grid-Lines，您可以轻松地在 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>

【讨论】：