如何调整yr.no SVG气象图小部件的定位并实现响应式？

问题根源 #

你当前的.weather-embed设置了width: 100%，导致mx-auto无法生效（自动水平边距需要容器有非100%的明确宽度）；同时iframe内的SVG可能自带固定尺寸，没有自适应容器宽度，所以出现左对齐且不响应式的情况。

修复方案 #

1. 调整容器宽度，让居中生效

给容器设置最大宽度，保留响应式基础的同时，让mx-auto能发挥水平居中作用。

2. 强制SVG自适应iframe

通过CSS覆盖SVG自带的固定尺寸样式，确保它能随容器缩放。

修改后的代码 #

HTML代码

<div class="weather-embed mx-auto">
    <iframe class="weather-embed-iframe" 
            src="https://www.yr.no/en/content/1-72837/meteogram.svg" 
            frameborder="0" 
            scrolling="no"></iframe>
</div>

SCSS代码

.weather-embed {
    position: relative;
    overflow: hidden;
    max-width: 800px; /* 可根据布局需求调整最大宽度 */
    width: 100%;
    padding-top: 56.25%; /* 维持16:9的响应式比例 */
    &-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        /* 强制SVG自适应容器 */
        & svg {
            width: 100% !important;
            height: auto !important;
        }
    }
}

额外说明 #

• max-width可根据实际需求修改（比如设为90%或其他像素值），平衡大屏显示宽度与小屏适配性。
• !important用于覆盖SVG自带的内联尺寸样式，确保它能跟随iframe容器缩放。
• 若仍有对齐问题，可替换.weather-embed的mx-auto为外层容器添加Bootstrap的d-flex justify-content-center类，两种居中方式二选一即可。

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