如何调整SVG填充图像的大小？

我需要在rect图像中填充，图像是动态的，大小是不固定的，当我设置属性时，发现一些没有完全填充的图片，只有当图像的宽度和高度同时出现时，才能完美显示

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="width:100%;height:100%;background-color:#9e9d9d">
    <defs>
        <pattern width="100%"
                    height="100%"
                    patternContentUnits="objectBoundingBox"
                    id="picturePattern">
            <image width="1.0" height="1.0" xlink:href="img/timg_6_thumb.jpg"></image>
        </pattern>

        <pattern width="100%"
                    height="100%"
                    patternContentUnits="objectBoundingBox"
                    id="picturePattern2">
            <image width="1.0" height="1.0" xlink:href="img/timg_6.jpg"></image>
        </pattern>
    </defs>
    <rect x="150" y="100" width="500" height="300" style="stroke-width:2px;stroke:#ff1234;fill:url('#picturePattern')"></rect>

    <rect x="150" y="450" width="500" height="300" style="stroke-width:2px;stroke:#ff1234;fill:url('#picturePattern2')"></rect>
</svg>

如图所示，第一张图片被裁剪，宽度和高度为1080，第二张图片为1920*1080

---

如何设置属性以自动匹配图像？

因此，您希望保留正确的纵横比？我不太清楚您是否想要一些封面或包含功能，但无论如何，如何设置这些动态图像？你真的没有办法知道它们的大小，或者至少它们的比例是多少吗？因为如果是针对浏览器，那么通过js，您可以检索这些信息，并根据图像大小设置模式

viewBox

。示例，感谢您的演示。看来我只能这样。如果我可以使用像背景大小这样的属性，那就太好了。