我想剪切尺寸各不相同、高度各为 50% 的图像。
所以我想到使用 inset 方法clip-path财产。但是，在这个属性中，切出的空间仍然保持高度。
.container {
display: flex;
align-items: start;
}
.img {
flex: 1;
background: #900;
}
.img+.img {
margin-left: 5px;
}
img {
max-width: 100%;
width: 100%;
clip-path: inset(0 0 45% 0);
}
<div class="container">
<div class="img">
<img src="https://via.placeholder.com/300x550/009/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/200x200/090/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
</div>
</div>
所以我用了overflow: hidden andheight编辑源代码如下：
.container {
display: flex;
align-items: start;
height: 100vh;
}
.img {
flex: 1;
background: #900;
height: 45%;
overflow: hidden;
}
.img+.img {
margin-left: 5px;
}
img {
max-width: 100%;
width: 100%;
}
<div class="container">
<div class="img">
<img src="https://via.placeholder.com/300x550/009/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/200x200/090/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
</div>
</div>
但是，它将是父容器高度的 45%，而不是图像高度的 45%。
为什么会出现这种行为？如何剪掉每张图像 50% 的高度并消除多余的空间？
百分比高度是相对于父元素的，在这种情况下，您面临着一个复杂的行为，其中45%是定义父高度的最高图像的高度。
获得所需内容的一个想法是考虑缩放，将图像放大两次，将容器缩小两次：
.container {
display: flex;
align-items: start;
height: 100vh;
}
.img {
flex: 1;
background: #900;
overflow: hidden;
transform:scaleY(0.5);
transform-origin:top;
}
.img+.img {
margin-left: 5px;
}
img {
max-width: 100%;
width: 100%;
transform:scaleY(2);
transform-origin:top;
}
<div class="container">
<div class="img">
<img src="https://via.placeholder.com/300x550/009/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/200x200/090/fff.png" alt>
</div>
<div class="img">
<img src="https://via.placeholder.com/600x150/09f/fff.png" alt>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
