时间戳

首页 > 解决方案 > 封面有 4 张不同尺寸的图片？

css - 封面有 4 张不同尺寸的图片？

问题描述

我昨天发布了一个问题，有人提出了一个类似的问题，但没有解决这个问题，但我的问题已关闭。所以我在这里，再次询问更多解释。

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

我如何实现这一目标？如果可能，请提供有关如何执行此操作的代码片段。

使用引导 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>

标签： csstwitter-bootstrapbootstrap-4flexboxcss-grid

解决方案

这就是您如何使用 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>

推荐阅读