Question

我想问一下，是否有可能使嵌入式的airnbnb列表响应？我正在使用此代码共享列表：

 <div class="airbnb-embed-frame" data-id="133213" data-view="home" data-hide-price="true" style="max-width:450px;width:100%;min-height:300px;height:100%;margin:auto;"><a href="https://www.airbnb.com/rooms/133213?s=51"><span>View On Airbnb</span></a><a href="https://www.airbnb.com/rooms/133213?s=51" rel="nofollow">1 BR APT + 1 LIVING RM @ SKYWALK CONDO (24th)</a><script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script></div>

容器响应但iframe的内容却没有。它只显示水平和垂直滚动。谢谢你的帮助。

Answer 1

我找到了一种解决方法，但是不确定是否能保持良好状态。这是codepen。

基本上，我所做的是通过执行客户端宽度来计算比例-10（用于正确位置的某些边距）除以嵌入式div的宽度，然后将其转换为合适的尺寸并设置原点向左以使其居中。

CSS：

.room-container {
    display: flex;
    flex-flow: row wrap;
 }

.room {
    width: 450px;
    height: 300px;
    margin: auto;
 }

@media all and (max-width: 500px) {
    .room-container {
        flex-direction: column;
    }

    .room {
        transform-origin: left;
    }
}

JS：

(function () {
    const resize = () => {
        let rooms = document.getElementsByClassName('room');

        for (let room of rooms) {
            let scale = (window.innerWidth - 15) / room.offsetWidth;
            room.style.transform = 'scale(' + scale + ')';
        }
    }

    window.onload = () => resize();
    window.onresize = () => resize();
})();

使嵌入式列表响应

1 个答案: