时间戳

首页 > 解决方案 > 图像在响应式布局中对齐

html - 图像在响应式布局中对齐

问题描述

这是我的布局，我想将每个框链接到不同的链接。我希望这是响应页面，所以我将图像切成 4 个不同大小的图像并创建如下代码：

<div style="width: 100%; clear: both; display: block; margin:0; padding: 0; border:0;">
  <div style="float: left; width:56%;">
    <img src="https://live.staticflickr.com/65535/51141286236_0353adecc9_h.jpg" style="width:100%" id="box1">
  </div>
  <div style="float: left; width:44%;">
    <img src="https://live.staticflickr.com/65535/51141496398_0e30d03c0f_h.jpg" style="width:100%" id="box2">
  </div>
</div>
<div style="width: 100%; clear: both; display: block; margin:0; padding: 0; border:0;">
  <div style="float: left; width:44%;">
    <img src="https://live.staticflickr.com/65535/51142387005_2d8153f7c9_h.jpg" style="width:100%" id="box3">
  </div>
  <div style="float: left; width:56%;">
    <img src="https://live.staticflickr.com/65535/51140609347_77e3ca38da_h.jpg" style="width:100%" id="box4">
  </div>
</div>

但是当我运行页面时，box1 和 3 之间的行不匹配取决于窗口大小，如我在此处附加的屏幕截图。我怎样才能解决这个问题？

标签： htmlcss

解决方案

您可以使用网格布局创建相同的布局。带有浅灰色边框的中间 div 将是 HTML 中的第一个 div，并将其放置在背景中，有点像 z-index 。grid-area然后将其他四个 div 放在顶部，在它们的规则中扩展它们的宽度和高度。

您可以通过 4 行网格创建 6 列网格。中间两列将是布局宽度的偏移量。第一行和最后一行/列将是灰色轮廓 div 之外的外部区域。然后根据您的布局将每列/行分成几部分。

grid-template-columns: 1fr 3fr 1fr 1fr 3fr 1fr;
grid-template-rows: 0.6fr 2.4fr 2.4fr 0.6fr;

然后说 sec5，中间部分，你给它 a grid-area: 2 / 2 / 4 / 6= grid-row-start / grid-column-start / grid-row-end / grid-column-end

通过将中间部分放在 HTML 中的第一个位置，它将再次位于其他四个 div 之后，这些 div 将保存您的图像。对于包含图像的第 1 到 4 部分中的每一个，您制作它们position: relative;以便您可以放置​​图像，并带有一个相对于其父级的样式类，position: absolute. 然后在您的 CSS 中为每个部分 1 - 4 添加规则，例如。.sec1 .img left: X%，bottom X%取决于你想要它的布局方式。

因此，通过将95vw和95vh的视口增量添加到您的父元素grid-container中，每个部分或部分 1fr、3fr等...将动态地分布在占据页面部分的页面上。因此，6 列布局1fr 3fr 1fr 1fr 3fr 1fr具有10 个相等的部分，其中每列将占据95vw宽度的百分比。所以1fr 3fr 1fr 1fr 3fr 1fr基本上是10%, 30%, 10%, 10%, 30%, 10%这等于95vw宽度grid-container的100%。

当您调整页面大小时，无论视口宽度/高度的大小如何，它都将保持相同的布局，从而使其动态可扩展。没有边界不匹配或不对齐的问题。

例子： 

* {
  margin: 0;
  padding: 0;
}

#main {
  display: flex;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1fr 1fr 1.8fr 1.2fr;
  grid-template-rows: 0.6fr 2.4fr 2.4fr 0.6fr;
  gap: 0px 0px;
  width: 95vw;
  height: 95vw;
  display: relative;
}

.sec5 {
  grid-area: 2 / 2 / 4 / 6;
  border: solid 1px #ccc;
  position: relative;
  z-index;
  -1;
}

.sec1 {
  grid-area: 1 / 1 / 3 / 5;
  border: purple 2px solid;
  position: relative;
}

.sec2 {
  grid-area: 1 / 5 / 3 / 7;
  border: purple 2px solid;
  position: relative;
}

.sec4 {
  grid-area: 3 / 3 / 5 / 7;
  border: purple 2px solid;
  position: relative;
}

.sec3 {
  grid-area: 3 / 1 / 5 / 3;
  border: purple 2px solid;
  position: relative;
}

.sec1 .img {
  position: absolute;
  width: 78%;
  height: 60%;
  right: 3%;
  bottom: 3%;
}

.sec2 .img {
  background: black;
  position: absolute;
  width: 65%;
  height: 60%;
  top: 15%;
  left: 2%;
}

.sec3 .img {
  background: black;
  position: absolute;
  width: 65%;
  height: 60%;
  bottom: 15%;
  right: 3%;
}

.sec4 .img {
  position: absolute;
  width: 78%;
  height: 60%;
  top: 3%;
  left: 2%;
}
<div id="main">
  <div class="grid-container">
    <div class="sec5">
    </div>
    <div class="sec1">
      <img class="img" src="https://www.bensound.com/bensound-img/deepblue.jpg" />
    </div>
    <div class="sec2">
      <img class="img" src="https://i.pinimg.com/originals/41/c8/df/41c8df73c7bf3429ad9931fda3ebe3b5.jpg" />
    </div>
    <div class="sec3">
      <img class="img" src="https://40.media.tumblr.com/10f182acdaf8bcf669fb6d2bf4e87f63/tumblr_nt72vk7d031txi013o5_250.jpg" />
    </div>
    <div class="sec4">
      <img class="img" src="http://www.clker.com/cliparts/1/8/3/8/1357863457910989673bigstock-best-internet-concept-of-globa-15990878[3]-md.png" />
    </div>
  </div>
</div>

推荐阅读