Css 切掉响应图像的一角

我有一个图像的角落被切断了。图像必须具有响应性，以便能够随页面增长和收缩。图像由CMS管理，因此必须以编程方式进行切角。客户端在上传之前不会手动执行此操作

我可以使用SVG来勾勒出我需要显示的部分图像。不幸的是，我必须给出一个设定的路径，这样它就不会有响应了。我甚至尝试创建一个使用图像作为路径填充的模式

<svg version="1.1" viewBox="0 0 242 282" preserveAspectRatio="xMinYMin meet" class="svg-content">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="242" height="282" x="0" y="0">
            <image xlink:href="http://placehold.it/242x282" x="0" y="0" width="242" height="282" />
        </pattern>
    </defs>
    <path d="M 0 0 L 178 0 L 242 64 L 242 282 L 0 282 z" stroke="green" fill="url(#img1)"/>
</svg>

但这不起作用，因为我必须给出一个绝对宽度和高度。我也尝试使用剪辑路径，但似乎从来没有正确的工作

有人有什么想法或见解可以帮助我吗

下面是一个图像需要看起来像什么的示例。

---

为什么它不再响应？只要viewBox设置正确（正如您所做的那样），就可以调整包含SVG的容器（例如，

）的大小，并且它将使用div调整大小

例如，尝试在以下小提琴中调整“结果”框的大小：

---

您能分享页面截图或您需要的特定区域吗？无论您做什么，您都必须使用适合于每个图像的尺寸定制SVG。SVG不能自动容纳任何大小的图像。必须显式设置文件中图形元素的大小。但是，您可以使用Javascript自动生成合适的SVG。三角形部分必须是透明的吗？如果它只需要与背景颜色相同，那么有更简单的解决方案。当然，如果您只想让图像填充矩形，那么有一个解决方案：谢谢！我从来没有想过要将PreserveSpectratio添加到图像标记本身。我还不太明白这个属性。我需要进一步研究它。