Cách đặt chiều cao bằng chiều rộng động (CSS fluid layout) trong JavaScript

Để làm vuông hoặc tỷ lệ khung hình (aspect ratio) cho phần tử có chiều rộng động (%), dùng JavaScript đọc offsetWidth hoặc getBoundingClientRect().width rồi gán cho height.

Ví dụ dùng jQuery (giản lược)

<!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>
    $(function() {
      var w = $('.myChild').width();
      $('.myChild').css('height', w + 'px'); // Tạo hình vuông
    });
  </script>
</head>
<body>
  <div class="wrap">
    <div class="myChild"></div>
  </div>
</body>
</html>

Cách hiện đại không cần JS (CSS thuần túy)

.myChild {
  width: 80%;
  aspect-ratio: 1 / 1; /* Tự động vuông */
  /* Hoặc 16/9, 4/3, v.v. */
}

Khuyến nghị: Dùng CSS aspect-ratio (hỗ trợ tất cả trình duyệt hiện đại) thay vì JavaScript để hiệu năng tốt hơn và tránh layout shift.