Question

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

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

这是我所寻找的代表：

Side to side images with one overlapping in the center

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

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

＆＃13;

AddRange

＆＃13;

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

＆＃13;

非常感谢：）

Answer 1

你基本上需要让FROM python:3.6 ENV PYTHONUNBUFFERED 1 ENV POSTGRES_DB db1 ENV POSTGRES_USER rdeng ENV POSTGRES_PASSWORD walterfedy COPY $PWD /code/ WORKDIR /code/ RUN pip install -r /code/requirements.txt COPY $PWD/back.sql /code/docker-entrypoint-initdb.d/back.sql EXPOSE 8000 5432的高度为宽度的一半（这样可以为两个方格提供空间）。为此，您需要使用padding trick。

.row

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

.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

这是最终结果：

＆＃13;

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

＆＃13;

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

＆＃13;

还有一件事：您可能希望使用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>

响应平方的图像，中间有一个过度的图像

2 个答案: