CSS使用clip-path调整图像大小以适应父容器

Question

我正在为每个员工创建一个带有卡片的页面。每张卡片的左边都有一张员工照片，右边是个人照片。我从我们的UX设计器那里得到了一个剪辑路径，用来塑造图像。但是当使用剪辑路径时，我不知道如何让图像自动调整到父div。因此，我无法通过媒体查询等方式调整卡的大小。

我假设我必须让剪辑路径自动调整大小以适合图像，或者让整个EmployeePhoto组件自动调整大小以适合父div。但到目前为止，我还没有找到解决这两个问题的方案。

你知道如何让图片和剪辑路径自动调整大小吗？优选地，仅CSS解决方案。

这里有一个代码沙箱来显示我的问题：https://codesandbox.io/s/elated-lalande-k1csv

Answer 1

好吧，我找到了一个解决方案。伊什。

我可以使用以下网页将剪辑路径中的坐标从绝对坐标转换为相对坐标：https://yoksel.github.io/relative-clip-path/

此外，我还可以将相对剪辑路径作为“定义”包含在页面的开头。

<svg style={{ height:0, width:0, display: 'inherit' }}>
  <clipPath id="drop-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.508,1 C0.226,1,-0.005,0.774,0,0.492 C0.004,0.218,0.229,0,0.503,0 H1 V0.497 C1,0.77,0.782,0.995,0.508,1" />
  </clipPath>
</svg>

然后，我可以在EmployeePhoto组件的样式中使用剪辑路径。

const EmployeePhoto = styled.img`
  margin-right: 1rem;
  height: 100%;
  clip-path: url(#drop-clip-path);
`;

我在这里创建了一个新的沙箱：https://codesandbox.io/s/elegant-nash-48st7?file=/src/App.js

诚然，这可能是hacky as h*ll。但只要它能正常工作，并且调试控制台不会对我大喊大叫，我就满意了。

如果您在这方面有更好的方法，我将很高兴听到。