我有一张图片，我需要使用SVG路径对其进行剪辑.它对定义的图像大小(如688px x 800px)工作得很好，但我的问题是，我理想情况下希望它能做出响应.我已经try 过使用preserveAspectRatio来让它工作，但还没有成功(您可以在问题的底部找到这段代码).我以前没有做过这样的事情，所以如果有任何帮助，我会非常感激的.
只是为了澄清，当我说响应性时，我希望它在屏幕大小上更流畅一些，而不是切割直边等.
101: 我试着将图像放在一个SVG元素中，但它根本不能正常工作，我也看不到如何使这个 idea 响应-https://jsfiddle.net/g80unhyq/
This is at the dimensions I've listed above
这是响应性开始发挥作用时的情况
我有一个例子来说明我到目前为止在TailWind的操场上做了什么--https://play.tailwindcss.com/fRq1Cv6OqP?file=css
Html:
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1367&q=80" alt="Your Image" class="masked-image" />
</div>
Css:以下内容:
.image-container {
position: relative;
width: 688px;
height: 800px;
}
.masked-image {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: path('{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}');
}
如上所述，我还try 以一种略微不同的方式使其工作:
Html:
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx" />
<svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="svg-mask">
<path
d="{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}"/>
</clipPath>
</defs>
</svg>
</div>
Css:以下内容:
.image-container img {
clip-path: url(#svg-mask);
}
但还是没有运气