Question

我将两张斜面照片的显示编码在一起，并尝试使其响应但没有成功（我认为使用正确的测量单位我们可以做到）。

这是我所在的位置（我在元素上放置了固定的像素大小，以便您可以看到所需的渲染）：

.container {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.img-shape {
  width: 400px;
  height: 400px;
  overflow: hidden;
}
.img-shape:nth-child(2n-1) {
  border-top-left-radius: 1.3rem;
  border-top-right-radius: 1.3rem;
  -webkit-clip-path: polygon(0% 0, 100% 0, 100% 50%, 0 100%);
  clip-path: polygon(0% 0, 100% 0, 100% 50%, 0 100%);
}
.img-shape:nth-child(2n) {
  margin-top: -185px;
  border-bottom-right-radius: 1.3rem;
  border-bottom-left-radius: 1.3rem;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}
.img-shape img {
  width: 100%;
}

<div class="container">
    <div class="img-shape">
        <img src="https://cdn.pixabay.com/photo/2020/11/10/10/08/architecture-5729165_960_720.jpg" alt="test">
    </div>
    <div class="img-shape">
        <img src="https://cdn.pixabay.com/photo/2020/11/10/01/34/pet-5728249_960_720.jpg" alt="test">
    </div>
</div>

在最大 .max-width 尺寸以下，我希望内容适合 .container 的尺寸而不会失真或偏移。

你能帮我吗？

谢谢

PS：您认为我的代码在生产环境中可行还是存在不兼容的风险？

响应剪辑路径项目垂直对齐

0 个答案: