如何实现figure内img与CSS背景SVG同步响应式等比例缩放

你原有代码的问题主要是三点：

1. 背景SVG没有设置background-size: 100% 100%，导致背景不会随容器完全同步拉伸缩放
2. 强制设置width: 118% !important让容器宽度脱离父级流，缩放时比例容易偏移
3. 没有给容器固定和SVG一致的宽高比，单纯靠百分比padding在不同视口下比例会漂移

以下是可直接使用的实现方案：

主流浏览器适配方案（支持aspect-ratio，兼容性覆盖95%以上全球用户） #

修改后的CSS代码如下：

.outline-img {
    margin: 0;
    box-sizing: border-box;
    /* 容器宽度匹配你原有图片的响应规则 */
    width: 100%;
    max-width: 1024px;
    /* 核心：替换为你实际SVG相框的宽高比，比如SVG宽1000高800就写100/80 */
    aspect-ratio: 100 / 80;
    /* 背景设置为完全适配容器 */
    background: url(/wp-content/uploads/2021/09/frame.svg) no-repeat center center;
    background-size: 100% 100%;
    /* 内边距对应相框的边框宽度，按需调整 */
    padding: 9.4%;
}
.outline-img img {
    display: block;
    width: 100%;
    height: 100%;
    /* 如需完整显示图片不裁切，可将cover改为contain */
    object-fit: cover;
}

原有HTML代码不需要做任何修改。

旧浏览器兼容方案（兼容IE、低版本Safari） #

如果需要兼容不支持aspect-ratio属性的旧浏览器，可使用padding比例锁方案：

.outline-img {
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 1024px;
    position: relative;
    /* 比例锁：数值为 (SVG高度 / SVG宽度)*100%，替换为你实际SVG的比例 */
    padding-top: 80%;
    background: url(/wp-content/uploads/2021/09/frame.svg) no-repeat center center;
    background-size: 100% 100%;
}
.outline-img img {
    position: absolute;
    /* 四个定位值对应相框的边框宽度，按需调整，100% - 左右/上下边距就是宽高值 */
    top: 9.4%;
    left: 9.4%;
    width: 81.2%;
    height: 81.2%;
    object-fit: cover;
}

注意事项 #

• 代码中的宽高比数值一定要和你的SVG相框原始宽高比完全一致，可打开SVG文件查看原始宽高计算得到
• 内边距/定位数值可根据相框实际的内框占比调整，只要和SVG的内框比例匹配即可

内容的提问来源于stack exchange，提问作者user3169905