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

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%
    }
}

...