css - 使嵌入式列表响应

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();
})();