鍔ㄦ€佹敼鍙榓spect ratio閫氬父娑夊強鍒拌皟鏁磋棰戞垨鍥惧儚鐨勫楂樻瘮渚嬶紝浠ラ€傚簲涓嶅悓鐨勬樉绀鸿澶囨垨灞忓箷灏哄銆備互涓嬫槸涓€浜涘父鐢ㄧ殑鎶€宸э細

1. 浣跨敤CSS锛氬湪缃戦〉寮€鍙戜腑锛屽彲浠ヤ娇鐢–SS鐨刟spect-ratio灞炴€ф潵鍔ㄦ€佹敼鍙樺厓绱犵殑瀹介珮姣斾緥銆備緥濡傦紝鍙互璁剧疆涓€涓浐瀹氱殑瀹介珮姣斾緥锛岀劧鍚庡湪涓嶅悓鐨勫獟浣撴煡璇腑鏍规嵁灞忓箷灏哄鎴栬澶囩被鍨嬫潵璋冩暣瀹藉害鍜岄珮搴︺€?/li>

.container {
  aspect-ratio: 16/9;
}

@media screen and (max-width: 600px) {
  .container {
    aspect-ratio: 4/3;
  }
}

2. 浣跨敤JavaScript锛氬湪鍓嶇寮€鍙戜腑锛屽彲浠ヤ娇鐢↗avaScript鏉ユ娴嬪睆骞曞昂瀵告垨璁惧绫诲瀷锛屽苟鍔ㄦ€佹敼鍙樺厓绱犵殑瀹介珮姣斾緥銆備緥濡傦紝鍙互鍦ㄧ獥鍙ｅぇ灏忔敼鍙樻椂閲嶆柊璁＄畻鍏冪礌鐨勫搴﹀拰楂樺害銆?/li>

window.addEventListener('resize', function() {
  var container = document.querySelector('.container');
  var aspectRatio = window.innerWidth / window.innerHeight;
  
  if (aspectRatio > 1.5) {
    container.style.width = '80%';
    container.style.height = container.offsetWidth / 16 * 9 + 'px';
  } else {
    container.style.height = '80%';
    container.style.width = container.offsetHeight / 9 * 16 + 'px';
  }
});

3. 浣跨敤瑙嗛鎾斁鍣細鍦ㄨ棰戞挱鏀惧櫒涓紝鍙互浣跨敤鍝嶅簲寮忚璁℃妧鏈潵鏍规嵁灞忓箷灏哄鍔ㄦ€佹敼鍙樿棰戠殑瀹介珮姣斾緥銆備竴浜涙祦琛岀殑瑙嗛鎾斁鍣ㄥ簱濡俈ideo.js鎴杙lyr鏀寔璁剧疆鍔ㄦ€乤spect ratio銆?/li>

鏃犺浣跨敤鍝鏂规硶锛岄兘鍙互鏍规嵁闇€瑕佸姩鎬佹敼鍙樺厓绱犵殑瀹介珮姣斾緥锛屼互纭繚鍐呭鍦ㄤ笉鍚岀殑璁惧鍜屽睆骞曚笂閮借兘澶熸纭樉绀恒€?/p>