Html 中间重叠的响应平方图像

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

• 两个图像必须一个挨着另一个，填满所有宽度
• 图像高度必须调整以创建方形图像
• 在两幅图像的中间，将放置一个图标或文本，以链接图像
• 外部容器没有固定的高度和宽度

这是我想要的东西的一种表现：

中间有一个重叠的侧对侧图像

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

• 根据图像的大小，正方形采用不同的大小
• 中间的图标不在中间

.main\u容器\u 1{
位置：绝对位置；
宽度：100%；
高度：600px；
背景色：石灰；
利润率：10px；
填充：10px；
}
.行{
宽度：100%；
背景颜色：黄色；
显示器：flex
}
.图像单元{
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏
}
.图像单元img{
弹性收缩：0；
最小宽度：100%；
最低高度：100%
}
.文本单元格{
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：白色；
}
.内部{
宽度：50px；
高度：50px；
背景色：红色；
}

文本

您基本上需要将

.row

的高度设置为其宽度的一半（这将为两个正方形留出空间）。要做到这一点，您需要使用

然后你需要绝对地定位你的图像，因为你用填充物来伪装他们父母的身高

.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单元格

放置在中心位置

transform

（您必须确保将

position:relative

放置到要相对放置它的父容器，在本例中为

.row

）：

以下是最终结果：

.main\u容器\u 1{
位置：绝对位置；
宽度：100%；
高度：600px；
背景色：石灰；
利润率：10px；
填充：10px；
}
.行{
宽度：100%；
垫面：50%；
背景颜色：黄色；
位置：相对位置；
}
.图像单元{
宽度：50%；
身高：100%；
位置：绝对位置；
排名：0；
}
.image_单元格：第n个子项（1）{
左：0；
}
.image_单元：第n个子单元（2）{
右：0；
}
.图像单元img{
宽度：100%；
身高：100%
}
.文本单元格{
位置：绝对位置；
背景：白色；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.内部{
宽度：50px；
高度：50px；
背景色：红色；
}

文本

为了解决这个问题，我添加了一个

.square

类来保持纵横比。我做的另一件事是在单元格周围的div上使用

对齐内容

和

对齐项目

，以使文本单元格居中

*{
字体系列：Arial，无衬线；
保证金：0；
填充：0；
}
.集装箱{
颜色：#fff；
填充：10px；
背景色：#333；
显示：内联块；
}
.容器.电池{
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.容器.细胞.图像{
弹性：0.50%；
背景：线性梯度(
135度，
rgb（252223138）0%，
rgb（243131129）100%
);
}
.容器.单元格.图像img{
宽度：100%；
身高：100%；
}
.container.cells.text{
位置：绝对位置；
宽度：60px；
线高：60px；
背景色：#5e2563；
文本对齐：居中；
}
.货柜{
边缘顶部：10px；
}
.广场{
位置：相对位置；
}
.广场：之后{
内容：“；
显示：块；
垫底：100%；
}
.广场.内容{
位置：绝对位置；
宽度：100%；
身高：100%；
}

中间的
这是一个可变宽度和高度的容器

.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 {
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}