html - 中间有重叠的响应式方形图像

Question

我正在尝试创建一个特定的布局，其中:

• 两张图片必须并排放置，填满整个宽度
• 图片高度必须适应以创建方形图片
• 在两张图片的中间放置一个图标或文字，作为图片的链接
• 外部容器没有固定的高度和宽度

这是我正在寻找的表示:

左右图片，中间有一张重叠

这是我设法做到的，但它有以下问题:

• 根据图片的大小，方 block 采用不同的大小
• 中间的图标不去中间...

.main_container_1 {
  position: absolute;
  width: 100%;
  height: 600px;
  background-color:lime;
  margin: 10px;
  padding: 10px;
}

.row {
  width: 100%;
  background-color: yellow;
  display:flex
}

.image_cell {
    width:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.image_cell img {
     flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

.text-cell {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center; 
  background:white;
}

.inner {
  width: 50px;
  height: 50px;
  background-color:red;
}

<div class="main_container_1">
  <div class="row">
    <div class="image_cell">
      <img src="http://placehold.it/450x200">
    </div>
    <div class="image_cell">
      <img src="http://placehold.it/200x200">
    </div>
     <div class="text-cell">
       <div class="inner">
         text
       </div>
    </div>
</div>

Answer 1

您基本上需要使 .row 的高度为其宽度的一半(这将为您留出两个正方形的空间)。为此，您需要使用 padding trick .

.row {
  width: 100%;
  padding-top: 50%;
  background-color: yellow;
  position: relative;
}

然后你需要绝对定位你的图像，因为你用填充来伪造他们 parent 的高度。

.image_cell {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.image_cell:nth-child(1) {
  left: 0;
}

.image_cell:nth-child(2) {
  right: 0;
}

最后，您可以像这样使用 transform 将您的 .text-cell 定位在中心(您必须确保将 position: relative 到你想要相对于它定位的父容器，在本例中是 .row):

.text-cell {
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

最终结果如下:

.main_container_1 {
  position: absolute;
  width: 100%;
  height: 600px;
  background-color: lime;
  margin: 10px;
  padding: 10px;
}

.row {
  width: 100%;
  padding-top: 50%;
  background-color: yellow;
  position: relative;
}

.image_cell {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.image_cell:nth-child(1) {
  left: 0;
}

.image_cell:nth-child(2) {
  right: 0;
}

.image_cell img {
  width: 100%;
  height: 100%
}

.text-cell {
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  width: 50px;
  height: 50px;
  background-color: red;
}

<div class="main_container_1">
  <div class="row">
    <div class="image_cell">
      <img src="http://placehold.it/450x200">
    </div>
    <div class="image_cell">
      <img src="http://placehold.it/200x200">
    </div>
    <div class="text-cell">
      <div class="inner">
        text
      </div>
    </div>
  </div>

还有一件事:您可能想研究使用 background images而不是保持宽高比。