求助：实现Featherlight灯箱中Iframe的响应式宽度

要实现iframe在浏览器窗口小于指定宽度时自动切换为100%宽度，需要同时调整Featherlight容器样式和iframe的规则，以下是具体步骤：

1. 移除固定尺寸属性 #

先删掉链接上的data-featherlight-iframe-height="575"和data-featherlight-iframe-width="800"，这些硬编码属性会强制固定尺寸，阻断响应式逻辑。

2. 调整HTML链接属性 #

修改链接的iframe样式属性，只保留高度和基础宽度设置：

<a href="目标页面链接" data-featherlight="iframe" data-featherlight-iframe-style="width: 100%; height: 575px;">打开响应式iframe</a>

3. 添加自定义CSS规则 #

Featherlight的默认弹窗容器没有自适应宽度限制，需要通过CSS约束容器尺寸，让iframe能跟着收缩：

/* 控制Featherlight弹窗容器的最大宽度和自适应行为 */
.featherlight .featherlight-content {
    max-width: 800px; /* 大屏下最大宽度800px */
    width: 90%; /* 小屏下占视口90%宽度 */
    margin: 0 auto; /* 居中显示 */
}

/* 强制iframe占满容器宽度 */
.featherlight iframe {
    width: 100% !important;
    max-width: 100%;
    border: none; /* 可选：去掉iframe默认边框 */
}

4. 可选：JS初始化配置（更灵活） #

如果需要批量控制所有iframe灯箱，也可以通过JS初始化Featherlight，避免重复写data属性：

$(document).ready(function() {
    $('[data-featherlight="iframe"]').featherlight({
        iframe: {
            style: {
                width: '100%',
                height: '575px'
            }
        },
        // 可选：添加其他配置，比如弹窗动画速度
        openSpeed: 250,
        closeSpeed: 250
    });
});

为什么之前的方法无效？ #

你之前添加的data-featherlight-iframe-style规则被Featherlight动态生成的容器样式覆盖了——弹窗容器本身没有设置max-width，导致iframe的max-width:800px无法触发自适应逻辑。必须同时约束容器的尺寸，让iframe能继承容器的宽度变化。

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