区块根据父宽度缩小放大？

Question

https://www.airbnb.com/s/Oreg...

我发现airbnb一个东西我想研究但是偷不走
我知道是flex相关技术
只是他的又更特别
进去的时候你应该会看到五个col的房屋资讯，有好几行
浏览器先把宽度拉到最小〜变成手机版
此时会剩下一个
然后往右开始拖拉直到有两个col
从这里开始再往右拉到有四个col的时候
这段期间的变化我实在是想偷也偷不走
很明显外面的div跟里面的图片宽度是一致的
随着父的宽度会等比例放大
重点是原本的图片大小假设是160x100
他也会根据比例放大到320x200 ....之类的
这到底是怎么做到的？！
整個區塊會往右下角放大

Answer 1

这种一般都是媒体查询啊，类似于这种写法，对每个具体的屏幕尺寸做适当调整

@media (max-width: 1030px) {
    .box {
        width:25%
    }
}

@media (max-width: 991px) {
    .box {
        width:33.3%
    }
}

@media (max-width: 721px) {
    .box {
        width:50%
    }
}

...

Answer 2

我觉得要实现这种布局有两种方式，一种是媒体查询，另外一种是用js监听resize事件，调整布局