css - 切掉响应图像的 Angular

Question

我有一个 Angular 被切掉的图像。图像必须是响应式的，这样它才能随着页面的变化而扩大和缩小。该图像由 CMS 管理，因此它必须以编程方式进行切 Angular 。客户端不会在上传之前手动执行此操作。

我可以使用 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>

但这不起作用，因为我必须给出绝对宽度和高度。我也尝试过使用 clip-path 但似乎从来没有正常工作。

有没有人有任何想法或见解可以帮助我解决这个问题？

这是图像需要的外观示例。

Answer 1

为什么它停止响应？只要 viewBox 设置正确(正如您所做的那样)，您就可以调整容纳 SVG 的容器(例如 <div>)的大小，它会随着 div 调整大小。

例如，尝试调整以下 fiddle 中“结果”框的大小:

http://jsfiddle.net/bCJs9/