图像马赛克（Bootstrap 和 NuxtJS）答案

【问题标题】：Image Mosaic (Bootstrap and NuxtJS)图像马赛克（Bootstrap 和 NuxtJS）
【发布时间】：2021-10-27 12:59:04
【问题描述】：

我正在尝试使用 Bootstrap、CSS 和 NuxtJS 构建图像马赛克。我有五张图片，第一张必须在中间。相对于第一个图像，左侧有两个图像，右侧有两个图像（所有图像都是正方形）。这是我的代码，但我在移动和桌面设计（必须是响应式设计）方面存在一些问题，并且不知道如何将第一张图片居中。有人帮我吗？提前致谢。

  <div class="container d-flex flex-md-column flex-lg-row">
    <div class="small-tiles flex-md-row flex-lg-column">
      <img
        src="../../assets/images/image2.png"
        alt="The second image"
      />
      <img
        src="../../assets/images/image3.png"
        alt="The third image"
      />
    </div>
    <div class="center-tile d-flex flex-column">
      <img
        src="../../assets/images/image1.png"
        alt="The first image"
      />
    </div>
    <div class="small-tiles flex-md-row flex-lg-column">
      <img
        src="../../assets/images/image4.png"
        alt="The fourth image"
      />
      <img
        src="../../assets/images/image5.png"
        alt="The fiveth image"
      />
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>

.container {
  width: 100%;
}

.small-tiles {
  @media only screen and (max-width: 576) {
    width: 100%;
    height: 25%;
  }
  @media only screen and (min-width: 576px) {
    width: 25%;
    height: 100%;
  }
}

.center-tile {
  @media only screen and (max-width: 576) {
    width: 100%;
    height: 50%;
  }
  @media only screen and (min-width: 576px) {
    width: 50%;
    height: 100%;
  }
}
</style>

【问题讨论】：

你想让所有的图片都一样大吗？
是的，我愿意。所有图片的大小必须相同

标签： css twitter-bootstrap bootstrap-4 sass nuxt.js

【解决方案1】：

假设所有图像以及正方形的大小都相同，这个 sn-p 使用纯 CSS 生成这个布局：

网格有 3 列。第一个有两个区域，中间有一个，第三个有两个。图像显示为每个区域的背景。显然，您会希望根据需要更改间隙和总体尺寸。

body {
  width: 100vw;
  height: 100vh;
}

.grid-container {
  width: 30%;
  aspect-ratio: 1;
  display: grid;
  grid-template-areas: 'pictl piccenter pictr' 'pictl piccenter pictr' 'picbl piccenter picbr' 'picbl piccenter picbr';
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
  height: auto;
}

*[class^="pic"] {
  background-repeat: no-repeat no-repeat;
  background-size: contain;
  background-position: center center;
}

.pic1 {
  grid-area: pictl;
}


/* top left */

.pic2 {
  grid-area: picbl;
}


/* bottom left */

.pic3 {
  grid-area: piccenter;
}


/* center */

.pic4 {
  grid-area: pictr;
}


/* top right */

.pic5 {
  grid-area: picbr;
}


/* bottom right */

.pic1 {
  background-image: url(https://picsum.photos/id/1015/200/200);
}

.pic2 {
  background-image: url(https://picsum.photos/id/1016/200/200);
}

.pic3 {
  background-image: url(https://picsum.photos/id/1018/200/200);
}

.pic4 {
  background-image: url(https://picsum.photos/id/1019/200/200);
}

.pic5 {
  background-image: url(https://picsum.photos/id/1022/200/200);
}

<div class="grid-container">
  <div class="pic1"></div>
  <div class="pic2"></div>
  <div class="pic3"></div>
  <div class="pic4"></div>
  <div class="pic5"></div>
</div>

【讨论】：