1,方案一:響應式來做,可以根據媒體查詢,設定在不同螢幕寬度下div的高度和寬度,具體的設定看你響應式想怎麼顯示

    @media only screen and (min-width: 100px) and (max-width: 640px) {
        div{
            width: 100px;
            height: 100px;
        }
    }
    @media only screen and (min-width: 641px) and (max-width: 789px) {
        div{
            width: 200px;
            height: 200px;
        }
    }
2.方案二:百分比來做,這裡需要運用一個小技巧,padding用百分比做單位時是相對於容器的寬度來算的,所以你可以把高度設為0,內容自然溢位,設定個padding-bottom

height:0;
width:50%;
 
padding-bottom:30%
那麼這個div的高寬比就是30%:50%