切掉响应式图像的角落答案

【问题标题】：Cut the corner off of a responsive image切掉响应式图像的角落
【发布时间】：2014-03-02 22:36:45
【问题描述】：

我有一个切角的图像。图像必须具有响应性，以便它可以随页面增长和缩小。图像由 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>

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

有没有人有任何想法或见解可以帮助我？

以下是图片需要看起来的示例。

【问题讨论】：

你能分享你需要的页面或特定区域的截图吗？

标签： css image svg responsive-design

【解决方案1】：

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

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

http://jsfiddle.net/bCJs9/

【讨论】：

无论您做什么，您都必须使用适合每个图像的尺寸自定义 SVG。 SVG 不能自动适应任何尺寸的图像。您必须明确设置文件中图形元素的大小。但是，您可以使用 Javascript 自动生成合适的 SVG。
三角片必须是透明的吗？如果只需要与背景颜色相同，那么还有更简单的解决方案。
当然，如果你想要的只是图像填充矩形，那么有这个解决方案：jsfiddle.net/KYv6e/1
谢谢！我从没想过将 preserveAspectRatio 添加到图像标签本身。我还不太明白那个属性。我需要更多地研究它。