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

Question

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

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

这是我正在寻找的表示：

左右图片中间有一个重叠

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

根据图像的大小，方块采用不同的大小
中间的图标不去中间...

.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 的高度设为其宽度的一半（这将使您 space 得到两个正方形）。为此，您需要使用 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 放到你想要的 parent 容器中将其相对定位，在本例中为 .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>

还有一件事：您可能想考虑使用来保持纵横比。

Answer 2

为了解决这个问题，我添加了一个.square class来保持纵横比。我做的另一件事是在单元格周围的 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>

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

Responsive squared images with overlapping one in the middle

html

css

responsive-design

responsive-images

responsive