Responsive clip-path items vertically aligned - html

Question

I coded the display of two beveled photos on top of each other and I try to make it responsive without success (I think that using the right units of measurement we can do it).
Here's where I'm at (I put fixed pixel sizes on the elements so you can see the desired rendering) :
.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>
Below the maximum .max-width size, I'd like the content to fit the size of the .container without distortion or offset.
Would you be able to help me?
Thank you
PS : Do you think my code is feasible in production or is there a risk of incompatibility?

Answer 1

Update the code like below and rely on percentage:
.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>
That you can also simplify like below:
.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>