วิธีตั้งค่าความสูงเท่ากับความกว้างไดนามิก (CSS Fluid Layout) ด้วย JavaScript

สามารถใช้ jQuery อ่านความกว้างขององค์ประกอบแล้วนำไปตั้งค่าความสูงให้เท่ากัน เพื่อสร้างอัตราส่วนคงที่

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      .wrap { width:400px; height:300px; border:2px solid yellow; }
      .myChild{ width: 80%; border:1px solid red; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      var res = $('.myChild').width();
      $('.myChild').css({ 'height': res + 'px' });
    </script>
  </head>
  <body>
    <div class="wrap">
      <div class="myChild"></div>
    </div>
  </body>
</html>