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

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 : 您认为我的代码在生产中是否可行，或者是否存在不兼容的风险？

Answer 1

更新如下代码并依赖百分比：

.container {
  max-width: 400px;
  margin: auto
}
.img-shape {
  overflow: hidden;
  position:relative;
}
.img-shape::before { /* this will maitain a square shape */
  content:"";
  padding-top:100%;
  display:block;
}
.img-shape:nth-child(2n-1) {
  border-radius: 1.3rem 1.3rem 0 0;
  clip-path: polygon(0% 0, 100% 0, 100% 50%, 0 100%);
}
.img-shape:nth-child(2n) {
  margin-top: calc(-50% + 20px); /* the gap is 20px */
  border-radius: 0 0 1.3rem 1.3rem;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}
.img-shape img {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

<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>

你也可以像下面这样简化：

.container {
  max-width: 400px;
  margin: auto
}

.container::before,
.container::after{
  content: "";
  padding-top: 100%;
  display: block;
  background:top/cover;
}

.container::before {
  border-radius: 1.3rem 1.3rem 0 0;
  clip-path: polygon(0% 0, 100% 0, 100% 50%, 0 100%);
  background-image:url(https://cdn.pixabay.com/photo/2020/11/10/10/08/architecture-5729165_960_720.jpg)
}

.container::after {
  margin-top: calc(-50% + 20px); /* the gap is 20px */
  border-radius: 0 0 1.3rem 1.3rem;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  background-image:url(https://cdn.pixabay.com/photo/2020/11/10/01/34/pet-5728249_960_720.jpg)
}

<div class="container"></div>

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

Responsive clip-path items vertically aligned

html

css

flexbox

clip-path