CSS 使用剪辑路径调整图像大小以适合父容器答案

【问题标题】：CSS Resize an image with clip-path to fit parent containerCSS 使用剪辑路径调整图像大小以适合父容器
【发布时间】：2021-03-17 17:35:32
【问题描述】：

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

我假设我要么必须让剪辑路径自动调整大小以适应图像，要么让整个 EmployeePhoto 组件自动调整大小以适应父 div。但到目前为止我还没有找到解决方案。

知道如何让图像和剪辑路径自动调整大小吗？最好是纯 CSS 解决方案。

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

【问题讨论】：

标签： css reactjs styled-components

【解决方案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，因为 h*ll。但只要它有效并且调试控制台没有对我大喊大叫，我就很满意了。

如果您对此有更好的方法，我会很高兴听到它。

【讨论】：