响应方形图像，中间重叠一个

Question

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

• 两个图像必须是另一个的一侧，填充所有宽度
• 图像高度必须适应以创建平方图像
• 在两个图像的中间，将放置图标或文本，作为链接图像
• 外部容器没有固定的高度和宽度

这是我正在寻找的代表：

Side to side images with one overlapping in the center

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

• 根据图像的大小，正方形采用不同的大小
• 中间的图标没有进入中间......

.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;
}

然后你需要绝对定位你的图像，因为你用填充伪装了父母的身高。

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

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

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

最后你可以使用像这样的.text-cell将你的transform定位在中心（你必须确保将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来保持纵横比。

Answer 2

为了解决这个问题，我添加了一个.square类来保持宽高比。我做的另一件事是在细胞周围的div上使用justify-content和align-items以使文本单元居中。

* {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  color: #fff;
  padding: 10px;
  background-color: #333;
  display: inline-block;
}

.container .cells {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .cells .image {
  flex: 0 0 50%;
  background: linear-gradient(
    135deg,
    rgb(252, 223, 138) 0%,
    rgb(243, 131, 129) 100%
  );
}

.container .cells .image img {
  width: 100%;
  height: 100%;
}

.container .cells .text {
  position: absolute;
  width: 60px;
  line-height: 60px;
  background-color: #5e2563;
  text-align: center;
}

.container p {
  margin-top: 10px;
}

.square {
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="cells">
    <div class="image square">
      <div class="content"></div>
    </div>
    <div class="image square">
      <div class="content"></div>
    </div>
    <div class="text">
      middle
    </div>
  </div>
  <p>This is a variable width and height container</p>
</div>